设置欢迎界面的调整动画，2秒
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. });
可以发现主界面上方的栏目栏是可以横向拖动的，并且选择。
下面就首先来实现上部栏目拖动这个效果：
大体思路结构图：
整体的布局文件是如下这样：
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个文件：
这个就是它在白天模式和黑夜模式下用的阴影图片。那我们可以采取重写HorizontalScrollView来判断滚动，如果滚动时候不是在最左边，显示左边阴影，不是在最右边，显示右边阴影。
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：
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：
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中的位置
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. }
完成的效果如下：
更多注释和实现方法可以查看DEMO源码文件，源码下载地址 ： DEMO源码
