484      阿裏雲  技術社區[雲棲]

仿今日頭條頂部導航效果

要知道它們是如何實現的，用到了什麼第三方庫文件，反編譯便是很好的一個了解方法，如果你想要了解如何反編譯可以點擊這個鏈接：反編譯就這麼簡單

隻是一般的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 plaincopy

1. <style name="AppTheme" parent="AppBaseTheme">  
2.     <item name="android:windowNoTitle">true</item>  
3. </style>  

[java] view plaincopy

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 plaincopy

1. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
2.     xmlns:tools="https://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來判斷滾動，如果滾動時候不是在最左邊，顯示左邊陰影，不是在最右邊，顯示右邊陰影。

[java] view plaincopy

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">   </span>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 plaincopy

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. }  

[java] view plaincopy

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.     }  

[java] view plaincopy

1. <span style="white-space:pre">  </span>/**  
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源碼

最後更新：2017-04-03 12:56:18

  上一篇： C# 係統應用之調用SDelete程序粉碎文件及基礎原理知識

  下一篇： 高仿今日頭條（轉載）