Android仿今日头条、CSDN顶部Tab布局

刚学Android不久，基础不是很好，但是这两天看到今日头条和CSDN顶部的导航栏觉得挺新奇，也想着试一试，参考了网上的资料（原文），后觉得还凑合，想分享出来，也借此机会尝试写博客，以便于累计自己的开发经验和知识。关于网上资料的概述和比较大家有兴趣可以参照原文，其他的我没试过也不知道。先来看看我的实现效果吧。

先来看看布局文件吧

使用android.support.design.widget.TabLayout中

app:tabIndicatorColor="@android:color/transparent"app:tabMode="scrollable这两个属性要添加依赖（build.gradle(Module:app)里面添加）<pre style="font-family: 宋体; font-size: 12pt; background-color: rgb(255, 255, 255);">compile <span style="color:#008000;"><strong>'com.android.support:design:23.0.1'</strong></span>compile <span style="color:#008000;"><strong>'com.android.support:support-v4:23.0.1'</strong></span>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/navajowhite"        android:gravity="center_vertical"        android:orientation="horizontal">        <android.support.design.widget.TabLayout            android:background="@drawable/shape"            android:id="@+id/tablayout"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            app:tabIndicatorColor="@android:color/transparent"            app:tabMode="scrollable">        </android.support.design.widget.TabLayout>        <LinearLayout            android:background="@drawable/shape"            android:id="@+id/btn_down"            android:layout_width="wrap_content"            android:layout_height="match_parent">        <ImageView            android:layout_gravity="center"            android:id="@+id/image_down"            android:layout_width="40dp"            android:layout_height="wrap_content"            android:layout_marginRight="8dp"            android:src="@drawable/ic_down"/>        </LinearLayout>    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </android.support.v4.view.ViewPager>    <ListView        android:id="@+id/listview"        android:layout_width="match_parent"        android:layout_height="wrap_content"></ListView></LinearLayout>

public class MainActivity extends FragmentActivity {    ViewPager viewPager;    private String[] titles = new String[]{"推荐", "热点", "城市", "社会","订阅", "娱乐", "科技", "汽车","体育", "财经", "美女"};    private ImageView image_down;    View.OnClickListener oListener=new MyOnClickListener();    private boolean visibility_Flag=false;    private ListView listview;    String [] array1={"最新","前端","移动开发","语言","云计算","游戏","图像","大数据","研发工具","软件人生","社区服务","前端"};    private View btn_down;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initWidght();    }    private void initWidght() {        image_down =(ImageView)findViewById(R.id.image_down);        btn_down =(View)findViewById(R.id.btn_down);        btn_down.setOnClickListener(oListener);        listview =(ListView)findViewById(R.id.listview);        ArrayAdapter<String>adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,array1);        listview.setAdapter(adapter);        //设置listview不可见并且不存在于ViewGroup        listview.setVisibility(View.GONE);        viewPager=(ViewPager)findViewById(R.id.viewPager);        //此处要注意使用的Fragment要一致，都使用android.support.v4.app包里面的，避免下面适配器参数出错        List<android.support.v4.app.Fragment>fragments=new ArrayList<>();        for(int i=0;i<titles.length;i++){            android.support.v4.app.Fragment fragment=new MyFragment();            Bundle bundle = new Bundle();            //利用setArguments传递参数            bundle.putString("text",titles[i]);            fragment.setArguments(bundle);            fragments.add(fragment);        }        viewPager.setAdapter(new TabFragmentAdapter(titles, fragments,getSupportFragmentManager(),this));        TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);        tablayout.setupWithViewPager(viewPager);        tablayout.setTabTextColors(getResources().getColor(R.color.darkgray), Color.RED);    }   /*****    * 自定义的按钮监听类    * ****/    private class MyOnClickListener implements View.OnClickListener{        @Override        public void onClick(View v) {            if(!visibility_Flag){                //设置listview可见                listview.setVisibility(View.VISIBLE);                positiveAnimation(v);                visibility_Flag=true;            }else {                listview.setVisibility(View.GONE);                negativeAnimation(v);                visibility_Flag=false;            }        }    }    /********     * 顺时针旋转动画     * ***/    private void positiveAnimation(View v){       Animation animation=new RotateAnimation(0,-180,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);        /** 匀速插值器 */        LinearInterpolator lir = new LinearInterpolator();        animation.setInterpolator(lir);        animation.setDuration(150);        /** 动画完成后不恢复原状 */        animation.setFillAfter(true);        image_down.startAnimation(animation);    }    /********     * 逆时针旋转动画     * ***/    private void negativeAnimation(View v){        Animation animation=new RotateAnimation(-180,0,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);        /** 匀速插值器 */        LinearInterpolator lir = new LinearInterpolator();        animation.setInterpolator(lir);        animation.setDuration(150);        /** 动画完成后不恢复原状 */        animation.setFillAfter(true);        image_down.startAnimation(animation);    }}

public class MyFragment extends Fragment {    private String mText;    @Override    public void onCreate(  Bundle bundle) {        super.onCreate(bundle);        if(getArguments()!=null){            mText = getArguments().getString("text");        }    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        TextView textView = new TextView(getActivity());        ViewGroup.LayoutParams params= new ViewGroup.LayoutParams(-1,-1);        textView.setLayoutParams(params);        textView.setGravity(Gravity.CENTER);        textView.setTextColor(Color.RED);        textView.setText(mText);        return textView;    }}

<pre name="code" class="java">适配器类

public class TabFragmentAdapter extends FragmentPagerAdapter {    private final String[] titles;    private Context context;    private List<Fragment> fragments;    public TabFragmentAdapter(String[] titles,List<Fragment> fragments, FragmentManager fm, Context context) {        super(fm);        this.context = context;        this.fragments = fragments;        this.titles = titles;    }    @Override    public Fragment getItem(int position) {        return fragments.get(position);    }    @Override    public int getCount() {        return titles.length;    }

//返回文章的标题，通过设置adapter参数为ViewPager拿到，在Fragment中显示    @Override    public CharSequence getPageTitle(int position) {        return titles[position];    }}

<pre style="font-family: 宋体; font-size: 12pt; background-color: rgb(255, 255, 255);">