设置欢迎界面的调整动画,2秒

[java]  view plain  copy


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. //跳转  
22.     }  
23. });

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

(android高仿系列)今日头条 --新闻阅读器 (一)_Fragment

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

大体思路结构图:

(android高仿系列)今日头条 --新闻阅读器 (一)_ViewPager_02

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

[java]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2. "http://schemas.android.com/tools"  
3. "match_parent"  
4. "match_parent"  
5. "vertical" >  
6.   
7. "@layout/main_head" />  
8.   
9.     <LinearLayout  
10. "match_parent"  
11. "40.0dip"  
12. "#fff3f3f3"  
13. "horizontal" >  
14.   
15.         <RelativeLayout  
16. "@+id/rl_column"  
17. "match_parent"  
18. "40.0dip"  
19. "1.0" >  
20.   
21.             <com.topnews.view.ColumnHorizontalScrollView  
22. "@+id/mColumnHorizontalScrollView"  
23. "match_parent"  
24. "40.0dip"  
25. "none" >  
26.   
27.                 <LinearLayout  
28. "@+id/mRadioGroup_content"  
29. "fill_parent"  
30. "40.0dip"  
31. "true"  
32. "center_vertical"  
33. "horizontal"  
34. "10.0dip"  
35. "10.0dip" />  
36.             </com.topnews.view.ColumnHorizontalScrollView>  
37.   
38.             <ImageView  
39. "@+id/shade_left"  
40. "10.0dip"  
41. "40.0dip"  
42. "true"  
43. "true"  
44. "@drawable/channel_leftblock"  
45. "gone" />  
46.   
47.             <ImageView  
48. "@+id/shade_right"  
49. "10.0dip"  
50. "40.0dip"  
51. "true"  
52. "true"  
53. "@drawable/channel_rightblock"  
54. "visible" />  
55.         </RelativeLayout>  
56.   
57.         <LinearLayout  
58. "@+id/ll_more_columns"  
59. "wrap_content"  
60. "40.0dip" >  
61.   
62.             <ImageView  
63. "@+id/button_more_columns"  
64. "40.0dip"  
65. "40.0dip"  
66. "center_vertical"  
67. "@drawable/channel_glide_day_bg" />  
68.         </LinearLayout>  
69.     </LinearLayout>  
70.   
71.     <View  
72. "@+id/category_line"  
73. "fill_parent"  
74. "0.5dip"  
75. "#ffdddddd" />  
76.   
77.     <android.support.v4.view.ViewPager  
78. "@+id/mViewPager"  
79. "match_parent"  
80. "match_parent" />  
81.   
82. </LinearLayout>

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

(android高仿系列)今日头条 --新闻阅读器 (一)_android_03

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

[java]  view plain  copy

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

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. 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. super.instantiateItem(container, position);  
49. return obj;  
50.     }  
51.   
52. }

之后添加栏目ITEM:

[java]  view plain  copy

1. int count =  newsClassify.size();  
2. for(int i = 0; i< count; i++){  
3. new LinearLayout.LayoutParams(mItemWidth , LayoutParams.WRAP_CONTENT);  
4. 10;  
5. 10;  
6. new TextView(this);  
7. this, R.style.top_category_scroll_view_item_text);  
8.         localTextView.setBackgroundResource(R.drawable.radio_buttong_bg);  
9.         localTextView.setGravity(Gravity.CENTER);  
10. 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. true);  
16.         }  
17. 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. false);  
25. else{  
26. 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

    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. 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. true;  
    22. else {  
    23. false;  
    24.             }  
    25.             checkView.setSelected(ischeck);  
    26.         }  
    27.     }  
     
     
     完成的效果如下:

    (android高仿系列)今日头条 --新闻阅读器 (一)_android_04



    阿里云国内75折 回扣 微信号:monov8
    阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
    标签: android