对于很多初学者或者刚工作的Android新手来说，我们的项目经验还停留在做demo的阶段，有没有一种很low的感觉，并且当你真正上手做大项目的时候又不知道把自己学到的东西用上去。有一种自己家里有座金山却不知道可以用来换钱换吃的。

　　我下载了一个开发者头条app(之前从未用过，是不是很out)。用了之后总结他的技术，打算以仿开发者头条项目为主线写一系列的Android开发教程，中间会穿插各种常用到的知识点模块，最终完成这样一个项目。

　　废话就说这么多了，开始今天的正题，带你实现开发者头条APP的启动页。

　　一.老规矩，先上效果图

带你实现开发者头条(一) 启动页实现

　　从效果图中我们可以看出，整个滑动的界面就是一个ViewPager实现，然后监听ViewPager的滑动事件，改变底部四个小图标的切换，以及跳转到首页的按钮的隐藏显示。

　　二.代码实现

　　1).整个布局文件。上面是ViewPager，下面是四个小图标存放的容器。

XML/HTML代码
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#FCF2E4">  
  6.     <android.support.v4.view.ViewPager  
  7.         android:id="@+id/viewpager_launcher"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent" />  
  10.     <RelativeLayout  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:orientation="vertical" >  
  14.         <LinearLayout  
  15.             android:id="@+id/viewGroup"  
  16.             android:layout_width="fill_parent"  
  17.             android:layout_height="wrap_content"  
  18.             android:layout_alignParentBottom="true"  
  19.             android:layout_marginBottom="30dp"  
  20.             android:gravity="center_horizontal"  
  21.             android:orientation="horizontal"/>  
  22.     </RelativeLayout>  
  23. </RelativeLayout>  

　　2).LauncherActivity 首先判断是否第一次启动，如果不是第一次直接进入首页，是第一次启动就初始化ViewPager，设置适配器，设置ViewPager滑动监听，然后添加底部的。。。View。 在Viewpager监听函数里面改变底部图标的选中状态，如果是最后一页显示“开启我的头条”按钮。

Java代码
  1. /** 
  2.  * 第一次启动页面 
  3.  *  
  4.  * @author Ansen 
  5.  * @create time 2016-04-15 
  6.  */  
  7. @SuppressLint("ResourceAsColor")  
  8. public class LauncherActivity extends FragmentActivity implements ILauncherView {  
  9.     private ViewPager viewpagerLauncher;  
  10.     private LauncherPagerAdapter adapter;  
  11.   
  12.     private ImageView[] tips;  
  13.   
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.   
  18.         setContentView(R.layout.activity_luancher);  
  19.           
  20.         if(!isFirst()){  
  21.             gotoMain();  
  22.         }  
  23.         viewpagerLauncher = (ViewPager) findViewById(R.id.viewpager_launcher);  
  24.         adapter = new LauncherPagerAdapter(this, this);  
  25.         viewpagerLauncher.setOffscreenPageLimit(2);  
  26.         viewpagerLauncher.setCurrentItem(0);  
  27.         viewpagerLauncher.setOnPageChangeListener(changeListener);  
  28.         viewpagerLauncher.setAdapter(adapter);  
  29.         viewpagerLauncher.setOnPageChangeListener(changeListener);  
  30.         ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);// 初始化底部显示控件  
  31.         tips = new ImageView[4];  
  32.         for (int i = 0; i < tips.length; i++) {  
  33.             ImageView imageView = new ImageView(this);  
  34.             if (i == 0) {  
  35.                 imageView.setBackgroundResource(R.drawable.page_indicator_focused);  
  36.             } else {  
  37.                 imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  
  38.             }  
  39.             tips[i] = imageView;  
  40.             LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  
  41.             layoutParams.leftMargin = 10;// 设置点点点view的左边距  
  42.             layoutParams.rightMargin = 10;// 设置点点点view的右边距  
  43.             group.addView(imageView, layoutParams);  
  44.         }  
  45.     }  
  46.   
  47.     private OnPageChangeListener changeListener = new OnPageChangeListener() {  
  48.         @Override  
  49.         public void onPageScrollStateChanged(int arg0) {}  
  50.         @Override  
  51.         public void onPageScrolled(int arg0, float arg1, int arg2) {}  
  52.         @Override  
  53.         public void onPageSelected(int index) {  
  54.             setImageBackground(index);// 改变点点点的切换效果  
  55.   
  56.             TextView tvStartHeadlines = (TextView) adapter.getViews().get(index).findViewById(R.id.tv_start_headlines);  
  57.             if (index == tips.length - 1) {// 最后一个  
  58.                 tvStartHeadlines.setVisibility(View.VISIBLE);  
  59.             } else {  
  60.                 tvStartHeadlines.setVisibility(View.INVISIBLE);  
  61.             }  
  62.         }  
  63.     };  
  64.   
  65.     /** 
  66.      * 改变点点点的切换效果 
  67.      * @param selectItems 
  68.      */  
  69.     private void setImageBackground(int selectItems) {  
  70.         for (int i = 0; i < tips.length; i++) {  
  71.             if (i == selectItems) {  
  72.                 tips[i].setBackgroundResource(R.drawable.page_indicator_focused);  
  73.             } else {  
  74.                 tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  
  75.             }  
  76.         }  
  77.     }  
  78.   
  79.     @Override  
  80.     public void gotoMain() {  
  81.         Intent intent = new Intent(this, MainActivity.class);  
  82.         startActivity(intent);  
  83.         finish();  
  84.     }  
  85.   
  86.     private boolean isFirst() {  
  87.         SharedPreferences setting = getSharedPreferences("headlines", 0);  
  88.         Boolean user_first = setting.getBoolean("FIRST", true);  
  89.         if (user_first) {// 第一次  
  90.             setting.edit().putBoolean("FIRST", false).commit();  
  91.             return true;  
  92.         } else {  
  93.             return false;  
  94.         }  
  95.     }  
  96. }  

　　3).LauncherPagerAdapter 继承PagerAdapter，在构造函数中初始化要显示的所有页面，其他的跟普通的适配器没啥区别，就多了两个重写的方法，destroyItem跟instantiateItem。destroyItem是删除一个页面，instantiateItem是加载一个页面。

Java代码
  1. /** 
  2.  * ViewPager适配器 
  3.  * @author ansen 
  4.  * @create time 2016-04-15 
  5.  */  
  6. public class LauncherPagerAdapter extends PagerAdapter implements OnClickListener{  
  7.     private ILauncherView launcherView;  
  8.       
  9.     private List<View> views;  
  10.     //每页显示的图片  
  11.     private int[] images=new int[]{R.drawable.tutorial_1,R.drawable.tutorial_2,R.drawable.tutorial_3,R.drawable.tutorial_4};  
  12.       
  13.     public LauncherPagerAdapter(Context context,ILauncherView launcherView){  
  14.         views=new ArrayList<View>();  
  15.         this.launcherView=launcherView;  
  16.         //初始化每页显示的View  
  17.         for(int i=0;i<images.length;i++){  
  18.             View item=LayoutInflater.from(context).inflate(R.layout.activity_luancher_pager_item, null);  
  19.             ImageView imageview=(ImageView) item.findViewById(R.id.imageview);  
  20.             imageview.setImageResource(images[i]);  
  21.             item.findViewById(R.id.tv_start_headlines).setOnClickListener(this);  
  22.             views.add(item);  
  23.         }  
  24.     }  
  25.       
  26.     public List<View> getViews() {  
  27.         return views;  
  28.     }  
  29.       
  30.     @Override  
  31.     public int getCount() {  
  32.         return views == null ? 0 : views.size();  
  33.     }  
  34.   
  35.     @Override  
  36.     public boolean isViewFromObject(View arg0, Object arg1) {  
  37.         return arg0==arg1;  
  38.     }  
  39.       
  40.     @Override  
  41.     public void destroyItem(ViewGroup container, int position, Object object){  
  42.         ((ViewPager) container).removeView(views.get(position));  
  43.     }  
  44.   
  45.     @Override  
  46.     public Object instantiateItem(ViewGroup container, int position) {  
  47.         ((ViewPager) container).addView(views.get(position), 0);  
  48.         return views.get(position);  
  49.     }  
  50.   
  51.     @Override  
  52.     public void onClick(View v) {  
  53.         launcherView.gotoMain();  
  54.     }  
  55. }  

　　4).还有每一页显示的item布局，以及“开启我的头条”按钮的背景shape我就不一一贴出来了。有兴趣的可以自行去下载demo。

　　三.源码下载

　　点击下载源码

本文发布：Android开发网
本文地址：http://www.jizhuomi.com/android/example/564.html
2016年4月25日
发布:鸡啄米 分类:Android开发实例 浏览: 评论:0