1. 云图网首页
  2. 技术专区
  3. 移动开发

仿今日头条顶部导航效果详解手机开发

• 移动开发

 之前发现很多人在群里面、论坛上求网易新闻客户端的源码，之后我就去下了个网易新闻客户端和今日头条新闻客户端，发现他们的大体是一样的，于是在最近的空闲时间，便去琢磨如何去实现这样一个APP。

要知道它们是如何实现的，用到了什么第三方库文件，反编译便是很好的一个了解方法，如果你想要了解如何反编译可以点击这个链接：反编译就这么简单

只是一般的APK打包后都是被混淆过的，所以没那么好了解他的每个界面是如何实现的，没事，那就自己慢慢摸索或则从它的资源文件中提取布局了解下整体的大概情况。

我通过反编译 –今日头条：

仿今日头条顶部导航效果详解手机开发

知道了它用到的架包有，提取了有用的部分：

1.android-support-v4.jar （最常用的官方架包之一）

2.android-support-v7.jar （主要用于ActionBar的低版本兼容）

3.handmark.pulltorefresh.library  (图片的下拉刷新包)

4.slidingmenu.lib  (侧拉菜单包)   使用方法配置以及下载：点击这里

5.umeng (友盟的官方架包)

自己要在加用上的架包有：

1.Android-Universal-Image-Loader  (图片的异步加载包)   使用方法配置以及下载：点击这里

注：发现架包中有aaa什么的命名，说明它被混淆过，所以要想进一步获取它的源码很困难，只能按照自己的思路去走。

好的，大体了解了它的整体结构，下面就开始它是如何开发的把：

注：本代码内用到的资源文件和属性配置部分从APK反编译的资源（SRC文件）中提取，为了达到更好的实现效果。

一.首先构建大体的框架，架包等用到的时候在导入

命名规范可以参考：android命名规范

仿今日头条顶部导航效果详解手机开发

二.进行配置

首先去掉应用的title栏目：

采取修改AndroidManifest.xml文件中application的android:theme=”@style/AppTheme”属性：

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1. <style name=“AppTheme” parent=“AppBaseTheme”>  
  2.     <item name=“android:windowNoTitle”>true</item>  
  3. </style>  
三.开始开发
设置欢迎界面的调整动画，2秒
[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1.   start_anima = new AlphaAnimation(0.3f, 1.0f);  
  2. start_anima.setDuration(2000);  
  3. view.startAnimation(start_anima);  
  4. start_anima.setAnimationListener(new AnimationListener() {  
  5.       
  6.     @Override  
  7.     public void onAnimationStart(Animation animation) {  
  8.         // TODO Auto-generated method stub  
  9.           
  10.     }  
  11.       
  12.     @Override  
  13.     public void onAnimationRepeat(Animation animation) {  
  14.         // TODO Auto-generated method stub  
  15.           
  16.     }  
  17.       
  18.     @Override  
  19.     public void onAnimationEnd(Animation animation) {  
  20.         // TODO Auto-generated method stub  
  21.         redirectTo();//跳转  
  22.     }  
  23. });  

之后便是主界面：

可以发现主界面上方的栏目栏是可以横向拖动的，并且选择。

仿今日头条顶部导航效果详解手机开发

下面就首先来实现上部栏目拖动这个效果：

大体思路结构图：

仿今日头条顶部导航效果详解手机开发

整体的布局文件是如下这样：

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1. <LinearLayout 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:orientation=“vertical” >  
  6.   
  7.     <include layout=“@layout/main_head” />  
  8.   
  9.     <LinearLayout  
  10.         android:layout_width=“match_parent”  
  11.         android:layout_height=“40.0dip”  
  12.         android:background=“#fff3f3f3”  
  13.         android:orientation=“horizontal” >  
  14.   
  15.         <RelativeLayout  
  16.             android:id=“@+id/rl_column”  
  17.             android:layout_width=“match_parent”  
  18.             android:layout_height=“40.0dip”  
  19.             android:layout_weight=“1.0” >  
  20.   
  21.             <com.topnews.view.ColumnHorizontalScrollView  
  22.                 android:id=“@+id/mColumnHorizontalScrollView”  
  23.                 android:layout_width=“match_parent”  
  24.                 android:layout_height=“40.0dip”  
  25.                 android:scrollbars=“none” >  
  26.   
  27.                 <LinearLayout  
  28.                     android:id=“@+id/mRadioGroup_content”  
  29.                     android:layout_width=“fill_parent”  
  30.                     android:layout_height=“40.0dip”  
  31.                     android:layout_centerVertical=“true”  
  32.                     android:gravity=“center_vertical”  
  33.                     android:orientation=“horizontal”  
  34.                     android:paddingLeft=“10.0dip”  
  35.                     android:paddingRight=“10.0dip” />  
  36.             </com.topnews.view.ColumnHorizontalScrollView>  
  37.   
  38.             <ImageView  
  39.                 android:id=“@+id/shade_left”  
  40.                 android:layout_width=“10.0dip”  
  41.                 android:layout_height=“40.0dip”  
  42.                 android:layout_alignParentLeft=“true”  
  43.                 android:layout_centerVertical=“true”  
  44.                 android:background=“@drawable/channel_leftblock”  
  45.                 android:visibility=“gone” />  
  46.   
  47.             <ImageView  
  48.                 android:id=“@+id/shade_right”  
  49.                 android:layout_width=“10.0dip”  
  50.                 android:layout_height=“40.0dip”  
  51.                 android:layout_alignParentRight=“true”  
  52.                 android:layout_centerVertical=“true”  
  53.                 android:background=“@drawable/channel_rightblock”  
  54.                 android:visibility=“visible” />  
  55.         </RelativeLayout>  
  56.   
  57.         <LinearLayout  
  58.             android:id=“@+id/ll_more_columns”  
  59.             android:layout_width=“wrap_content”  
  60.             android:layout_height=“40.0dip” >  
  61.   
  62.             <ImageView  
  63.                 android:id=“@+id/button_more_columns”  
  64.                 android:layout_width=“40.0dip”  
  65.                 android:layout_height=“40.0dip”  
  66.                 android:layout_gravity=“center_vertical”  
  67.                 android:src=“@drawable/channel_glide_day_bg” />  
  68.         </LinearLayout>  
  69.     </LinearLayout>  
  70.   
  71.     <View  
  72.         android:id=“@+id/category_line”  
  73.         android:layout_width=“fill_parent”  
  74.         android:layout_height=“0.5dip”  
  75.         android:background=“#ffdddddd” />  
  76.   
  77.     <android.support.v4.view.ViewPager  
  78.         android:id=“@+id/mViewPager”  
  79.         android:layout_width=“match_parent”  
  80.         android:layout_height=“match_parent” />  
  81.   
  82. </LinearLayout>  

由于发现HorizontalScrollView左右拖动的时候没有那种阴影效果，所以在这里，我们发现了头条的资源文件下有这么2个文件：

仿今日头条顶部导航效果详解手机开发

这个就是它在白天模式和黑夜模式下用的阴影图片。那我们可以采取重写HorizontalScrollView来判断滚动，如果滚动时候不是在最左边，显示左边阴影，不是在最右边，显示右边阴影。

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1. public class ColumnHorizontalScrollView extends HorizontalScrollView {  
  2.     /** 传入整体布局  */  
  3.     private View ll_content;  
  4.     /** 传入更多栏目选择布局 */  
  5.     private View ll_more;  
  6.     /** 传入拖动栏布局 */  
  7.     private View rl_column;  
  8.     /** 左阴影图片 */  
  9.     private ImageView leftImage;  
  10.     /** 右阴影图片 */  
  11.     private ImageView rightImage;  
  12.     /** 屏幕宽度 */  
  13.     private int mScreenWitdh = 0;  
  14.     /** 父类的活动activity */  
  15.     private Activity activity;  
  16.       
  17.     public ColumnHorizontalScrollView(Context context) {  
  18.         super(context);  
  19.     }  
  20.   
  21.     public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {  
  22.         super(context, attrs);  
  23.     }  
  24.   
  25.     public ColumnHorizontalScrollView(Context context, AttributeSet attrs,  
  26.             int defStyle) {  
  27.         super(context, attrs, defStyle);  
  28.     }  
  29.     /**  
  30.      * 在拖动的时候执行 
  31.      * */  
  32.     @Override  
  33.     protected void onScrollChanged(int paramInt1, int paramInt2, int paramInt3, int paramInt4) {  
  34.         // TODO Auto-generated method stub  
  35.         super.onScrollChanged(paramInt1, paramInt2, paramInt3, paramInt4);  
  36.         shade_ShowOrHide();  
  37.         if(!activity.isFinishing() && ll_content !=null && leftImage!=null && rightImage!=null && ll_more!=null && rl_column !=null){  
  38.             if(ll_content.getWidth() <= mScreenWitdh){  
  39.                 leftImage.setVisibility(View.GONE);  
  40.                 rightImage.setVisibility(View.GONE);  
  41.             }  
  42.         }else{  
  43.             return;  
  44.         }  
  45.         if(paramInt1 ==0){  
  46.             leftImage.setVisibility(View.GONE);  
  47.             rightImage.setVisibility(View.VISIBLE);  
  48.             return;  
  49.         }  
  50.         if(ll_content.getWidth() – paramInt1 + ll_more.getWidth() + rl_column.getLeft() == mScreenWitdh){  
  51.             leftImage.setVisibility(View.VISIBLE);  
  52.             rightImage.setVisibility(View.GONE);  
  53.             return;  
  54.         }  
  55.         leftImage.setVisibility(View.VISIBLE);  
  56.        <span style=“white-space:pre”>   rightImage.setVisibility(View.VISIBLE);  
  57.     }  
  58.     /**  
  59.      * 传入父类布局中的资源文件 
  60.      * */  
  61.     public void setParam(Activity activity, int mScreenWitdh,View paramView1,ImageView paramView2, ImageView paramView3 ,View paramView4,View paramView5){  
  62.         this.activity = activity;  
  63.         this.mScreenWitdh = mScreenWitdh;  
  64.         ll_content = paramView1;  
  65.         leftImage = paramView2;  
  66.         rightImage = paramView3;  
  67.         ll_more = paramView4;  
  68.         rl_column = paramView5;  
  69.     }  
  70.     /**  
  71.      * 判断左右阴影的显示隐藏效果 
  72.      * */  
  73.     public void shade_ShowOrHide() {  
  74.         if (!activity.isFinishing() && ll_content != null) {  
  75.             measure(0, 0);  
  76.             //如果整体宽度小于屏幕宽度的话，那左右阴影都隐藏  
  77.             if (mScreenWitdh >= getMeasuredWidth()) {  
  78.                 leftImage.setVisibility(View.GONE);  
  79.                 rightImage.setVisibility(View.GONE);  
  80.             }  
  81.         } else {  
  82.             return;  
  83.         }  
  84.         //如果滑动在最左边时候，左边阴影隐藏，右边显示  
  85.         if (getLeft() == 0) {  
  86.             leftImage.setVisibility(View.GONE);  
  87.             rightImage.setVisibility(View.VISIBLE);  
  88.             return;  
  89.         }  
  90.         //如果滑动在最右边时候，左边阴影显示，右边隐藏  
  91.         if (getRight() == getMeasuredWidth() – mScreenWitdh) {  
  92.             leftImage.setVisibility(View.VISIBLE);  
  93.             rightImage.setVisibility(View.GONE);  
  94.             return;  
  95.         }  
  96.         //否则，说明在中间位置，左、右阴影都显示  
  97.         leftImage.setVisibility(View.VISIBLE);  
  98.         rightImage.setVisibility(View.VISIBLE);  
  99.     }  
  100. }  

之后

private ArrayList<NewsClassify> newsClassify=new ArrayList<NewsClassify>();

根据newsClassify这个栏目分类列表里面的数量进行添加栏目。（这里首先采用了自己限定的ITEM，而没有进行数据库的操作，以后加上）

ViewPage的适配器NewsFragmentPagerAdapter，通过ViewPage切换对应栏目的的Fragment：

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1. public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {  
  2.     private ArrayList<Fragment> fragments;  
  3.     private FragmentManager fm;  
  4.   
  5.     public NewsFragmentPagerAdapter(FragmentManager fm) {  
  6.         super(fm);  
  7.         this.fm = fm;  
  8.     }  
  9.   
  10.     public NewsFragmentPagerAdapter(FragmentManager fm,  
  11.             ArrayList<Fragment> fragments) {  
  12.         super(fm);  
  13.         this.fm = fm;  
  14.         this.fragments = fragments;  
  15.     }  
  16.   
  17.     @Override  
  18.     public int getCount() {  
  19.         return fragments.size();  
  20.     }  
  21.   
  22.     @Override  
  23.     public Fragment getItem(int position) {  
  24.         return fragments.get(position);  
  25.     }  
  26.   
  27.     @Override  
  28.     public int getItemPosition(Object object) {  
  29.         return POSITION_NONE;  
  30.     }  
  31.   
  32.     public void setFragments(ArrayList<Fragment> fragments) {  
  33.         if (this.fragments != null) {  
  34.             FragmentTransaction ft = fm.beginTransaction();  
  35.             for (Fragment f : this.fragments) {  
  36.                 ft.remove(f);  
  37.             }  
  38.             ft.commit();  
  39.             ft = null;  
  40.             fm.executePendingTransactions();  
  41.         }  
  42.         this.fragments = fragments;  
  43.         notifyDataSetChanged();  
  44.     }  
  45.   
  46.     @Override  
  47.     public Object instantiateItem(ViewGroup container, final int position) {  
  48.         Object obj = super.instantiateItem(container, position);  
  49.         return obj;  
  50.     }  
  51.   
  52. }  

之后添加栏目ITEM：

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1. int count =  newsClassify.size();  
  2.     for(int i = 0; i< count; i++){  
  3.         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mItemWidth , LayoutParams.WRAP_CONTENT);  
  4.         params.leftMargin = 10;  
  5.         params.rightMargin = 10;  
  6.         TextView localTextView = new TextView(this);  
  7.         localTextView.setTextAppearance(this, R.style.top_category_scroll_view_item_text);  
  8.         localTextView.setBackgroundResource(R.drawable.radio_buttong_bg);  
  9.         localTextView.setGravity(Gravity.CENTER);  
  10.         localTextView.setPadding(5, 0, 5, 0);  
  11.         localTextView.setId(i);  
  12.         localTextView.setText(newsClassify.get(i).getTitle());  
  13.         localTextView.setTextColor(getResources().getColorStateList(R.color.top_category_scroll_text_color_day));  
  14.         if(columnSelectIndex == i){  
  15.             localTextView.setSelected(true);  
  16.         }  
  17.         localTextView.setOnClickListener(new OnClickListener() {  
  18.           
  19.             @Override  
  20.             public void onClick(View v) {  
  21.                   for(int i = 0;i < mRadioGroup_content.getChildCount();i++){  
  22.                       View localView = mRadioGroup_content.getChildAt(i);  
  23.                       if (localView != v)  
  24.                           localView.setSelected(false);  
  25.                       else{  
  26.                           localView.setSelected(true);  
  27.                           mViewPager.setCurrentItem(i);  
  28.                       }  
  29.                   }  
  30.                   Toast.makeText(getApplicationContext(), newsClassify.get(v.getId()).getTitle(), Toast.LENGTH_SHORT).show();  
  31.             }  
  32.         });  
  33.         mRadioGroup_content.addView(localTextView, i ,params);  
  34.     }  

之后根据选择栏目的来调整ColumnHorizontalScrollView中的位置

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  1. <span style=“white-space:pre”>  /**  
  2.      *  选择的Column里面的Tab 
  3.      * */  
  4.     private void selectTab(int tab_postion) {  
  5.         columnSelectIndex = tab_postion;  
  6.         for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {  
  7.             View checkView = mRadioGroup_content.getChildAt(tab_postion);  
  8.             int k = checkView.getMeasuredWidth();  
  9.             int l = checkView.getLeft();  
  10.             int i2 = l + k / 2 – mScreenWidth / 2;  
  11.             // rg_nav_content.getParent()).smoothScrollTo(i2, 0);  
  12.             mColumnHorizontalScrollView.smoothScrollTo(i2, 0);  
  13.             // mColumnHorizontalScrollView.smoothScrollTo((position – 2) *  
  14.             // mItemWidth , 0);  
  15.         }  
  16.         //判断是否选中  
  17.         for (int j = 0; j <  mRadioGroup_content.getChildCount(); j++) {  
  18.             View checkView = mRadioGroup_content.getChildAt(j);  
  19.             boolean ischeck;  
  20.             if (j == tab_postion) {  
  21.                 ischeck = true;  
  22.             } else {  
  23.                 ischeck = false;  
  24.             }  
  25.             checkView.setSelected(ischeck);  
  26.         }  
  27.     }  

完成的效果如下：

仿今日头条顶部导航效果详解手机开发

更多注释和实现方法可以查看DEMO源码文件，源码下载地址 ：  DEMO源码

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/5605.html

赞 (0)
0
上一篇 2021年7月16日
下一篇 2021年7月16日

相关推荐

发表回复

登录后才能评论