注意对应的 style 还有 color 还有 string 下面都要有
注意 对应的一个依赖
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:23.2.1'
compile 'com.android.support:design:23.2.1'
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:cardview-v7:23.2.1'
testCompile 'junit:junit:4.12'
}
接下来 撸代码 对应的 Mainactivity界面
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.button).setOnClickListener(this);
findViewById(R.id.button2).setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button:
intent=new Intent(MainActivity.this, TabLessActivity.class);
break;
case R.id.button2:
intent=new Intent(MainActivity.this, TabManyActivity.class);
break;
}
startActivity(intent);
}
}
<?xml version="1.0" encoding="utf-8"?>
<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="com.newstablayout.MainActivity">
<Button
android:text="Tab固定数据"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button" />
<Button
android:text="Tab多个数据"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button2" />
</LinearLayout>
第一步创建一个 TabLessActivity
public class TabLessActivity extends AppCompatActivity { private TabLayout tabLayout = null; private ViewPager viewPager; private Fragment[] mFragmentArrays = new Fragment[5]; private String[] mTabTitles = new String[5]; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.tab_layout); tabLayout = (TabLayout) findViewById(R.id.tablayout); viewPager = (ViewPager) findViewById(R.id.tab_viewpager); initView(); } private void initView() { mTabTitles[0] = "推荐"; mTabTitles[1] = "热点"; mTabTitles[2] = "科技"; mTabTitles[3] = "体育"; mTabTitles[4] = "健康"; tabLayout.setTabMode(TabLayout.MODE_FIXED); //设置tablayout距离上下左右的距离 //tab_title.setPadding(20,20,20,20); mFragmentArrays[0] = TabFragment.newInstance(); mFragmentArrays[1] = TabFragment.newInstance(); mFragmentArrays[2] = TabFragment.newInstance(); mFragmentArrays[3] = TabFragment.newInstance(); mFragmentArrays[4] = TabFragment.newInstance(); PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(pagerAdapter); //将ViewPager和TabLayout绑定 tabLayout.setupWithViewPager(viewPager); } final class MyViewPagerAdapter extends FragmentPagerAdapter { public MyViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return mFragmentArrays[position]; } @Override public int getCount() { return mFragmentArrays.length; } @Override public CharSequence getPageTitle(int position) { return mTabTitles[position]; } } }
对应的布局
<?xml version="1.0" encoding="utf-8"?> <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"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#E0E0E0" app:tabIndicatorColor="@color/ind_red" app:tabMode="fixed" app:tabSelectedTextColor="@color/material_orange" app:tabTextColor="@android:color/black" app:tabIndicatorHeight="5dp" app:tabTextAppearance="@style/TabStyle" /> <android.support.v4.view.ViewPager android:id="@+id/tab_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout> <!-- app:tabMode="scrollable" 设置tabMode属性为可以滚动 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); android design library提供的TabLayout控件 tabIndicatorColor:菜单下方移动的横线的颜色 tabSelectedTextColor :菜单被选中之后的颜色 tabTextColor : 菜单正常的颜色 app:tabTextAppearance : 添加样式,这里加了样式主要是为了在文字前面加一个图所用,就是把textAllCaps设置成false -->
对应的第二个 TabManyActivity
public class TabManyActivity extends AppCompatActivity {
private TabLayout tabLayout = null;
private ViewPager vp_pager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.tab_layout);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
vp_pager = (ViewPager) findViewById(R.id.tab_viewpager);
initView();
}
private void initView() {
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
vp_pager.setAdapter(new MorePagerAdapter());
tabLayout.setupWithViewPager(vp_pager);
}
final class MorePagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return 10;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
TextView tv = new TextView(TabManyActivity.this);
tv.setText("布局" + position);
tv.setTextSize(30.0f);
tv.setGravity(Gravity.CENTER);
(container).addView(tv);
return tv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
(container).removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
return "选项" + position;
}
}
}
public class TabFragment extends Fragment {
public static Fragment newInstance() {
TabFragment fragment = new TabFragment();
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recycler);
LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(new RecyclerAdapter());
return rootView;
}
}
Fragment 对应的布局
<?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:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
对应的适配器
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.AuthorViewHolder> {
@Override
public AuthorViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View childView = inflater.inflate(R.layout.item, parent, false);
AuthorViewHolder viewHolder = new AuthorViewHolder(childView);
return viewHolder;
}
@Override
public void onBindViewHolder(AuthorViewHolder holder, int position) {
}
@Override
public int getItemCount() {
return 15;
}
class AuthorViewHolder extends RecyclerView.ViewHolder {
TextView mNickNameView;
TextView mMottoView;
public AuthorViewHolder(View itemView) {
super(itemView);
mNickNameView = (TextView) itemView.findViewById(R.id.tv_nickname);
mMottoView = (TextView) itemView.findViewById(R.id.tv_motto);
}
}
}
对应的适配器的子条目
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="horizontal"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
cardview:cardCornerRadius="4dp"
cardview:cardElevation="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_portrait"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_margin="5dp"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textSize="20sp"
android:textStyle="bold"
android:text="新闻标题"
android:textColor="@color/blue_light"/>
<TextView
android:id="@+id/tv_motto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="新闻部分内容"
android:textColor="@android:color/black"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
对应的 values 下面的属性 color style
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="ind_red">#B30E17</color>
<color name="blue_light">#00C0E4</color>
<color name="material_orange">#ffEF6C00</color>
</resources>
对应的style
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="TabStyle" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
<item name="android:textSize">18sp</item>
</style>
</resources>
QQ591528075 ,如果不清楚可以咨询 相互学习