Android高级UI绘制之TabLayout

MaterialDesign_TabLayout

• MainActivity

package com.example.dell.myapplication;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.design.widget.TabLayout.Tab;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

	private TabLayout tabLayout;
	private String[] title = {
//		"头条",
//		"新闻",
//		"娱乐",
//		"体育",
//		"科技",
//		"美女",
			"财经",
			"汽车",
			"房子",
			"头条"
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
		tabLayout = (TabLayout)findViewById(R.id.tablayout);
		MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
		//方法一:
		//1.TabLayout和Viewpager关联
		tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

			@Override
			public void onTabUnselected(Tab arg0) {
			}

			@Override
			public void onTabSelected(Tab tab) {
				// 被选中的时候回调
				viewPager.setCurrentItem(tab.getPosition(),true);
			}

			@Override
			public void onTabReselected(Tab arg0) {
			}
		});
		//2.ViewPager滑动关联tabLayout
		viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
		//设置tabLayout的标签来自于PagerAdapter
		tabLayout.setTabsFromPagerAdapter(adapter);

		viewPager.setAdapter(adapter);
		//方法二：一步到位
		//tabLayout.setupWithViewPager(viewPager);
		for (int i = 0; i < tabLayout.getTabCount(); i++) {
			Tab tab = tabLayout.getTabAt(i);
//			tab.setText(Html.toHtml(text))
			View view = View.inflate(this, R.layout.bottom_navigation, null);
			TextView tv_name = (TextView) view.findViewById(R.id.tv_name);
			tv_name.setText(title[i]);
			tab.setCustomView(view);
//			tab.setIcon(icon)
		}
	}

	class MyPagerAdapter extends FragmentPagerAdapter{

		public MyPagerAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public CharSequence getPageTitle(int position) {
			// TODO Auto-generated method stub
			return title[position];
		}

		@Override
		public Fragment getItem(int position) {
			Fragment f = new NewsDetailFragment();
			Bundle bundle = new Bundle();
			bundle.putString("title", title[position]);
			f.setArguments(bundle);
			return f;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return title.length;
		}
	}
}

• MainActivity布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        app:tabIndicatorColor="@color/colorPrimary_pink"
        app:tabTextColor="@color/colorPrimary_pink"
        app:tabSelectedTextColor="@color/colorPrimary_pinkDark"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        />
    <!--tablayout放在下面，那么标题栏就显示在下面-->

</LinearLayout>

• bottom_navigation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="聊天" />
    </LinearLayout>

</LinearLayout>

• Fragment类:

package com.example.dell.myapplication;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class NewsDetailFragment extends Fragment {
	
	@Override
	@Nullable
	public View onCreateView(LayoutInflater inflater,
			@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
		TextView tv = new TextView(getContext());
		Bundle bundle = getArguments();
		String title = bundle.getString("title");
		tv.setBackgroundColor(Color.rgb((int)(Math.random()*255), (int)(Math.random()*255), (int)(Math.random()*255)));
		tv.setText(title);
		return tv;
	}
}

• 运行截图: