- 我对这三个组件的理解我对这三个组件的理解
最终要实现的效果是可以通过屏幕的左右滑动,切换导航栏,同时也能点击导航栏切换不同的页面。截图:
我的理解:Tablayout组件就是顶部导航栏的部分,ViewPager是页面中除了导航栏以外的部分,即展示内容的部分,而Fragment(碎片)就是来处理这部分数据填充的工具,换言之就是用fragment来设置每个标签下显示的内容是什么。
- 实现过程
- 看一下文件目录吧:主要包含的文件就是三个java类和两个.xml文件
1.添加依赖库
因为要使用这个TabLayout,需要在build.gradle文件的dependencies中加入compile 'com.android.support:design:27.1.1’这一行。这个版本号根据你的版本号来定,也可以在build.gradle文件中看到你的sdk版本号,比如我的就是:
2.创建main_activity.xml文件
这个文件中主要就是包含两个组件:viewPager和Tablayout
<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:clipToPadding="true"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.example.lenovo.learningandroid.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3.创建fragment_detail_info.xml
这个布局文件用于显示除了导航栏以外下面的内容,这里只写了一个Textview,可以根据需要来增加组件
<FrameLayout 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"
tools:context="com.example.lenovo.learningandroid.DetailInfoFragment">
<TextView
android:id="@+id/detail_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="18dp"
android:textStyle="bold"/>
</FrameLayout>
4.创建DetailInfoFragment.java
该类继承自Fragment类,需要重写一些方法。
package com.example.lenovo.learningandroid;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class DetailInfoFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
private static final String ARG_PARAM = "param";
// TODO: Rename and change types of parameters
private int mParam;//用来表示当前需要展示的是哪一页
private TextView detail_text;//展示的具体内容,这里为了简单只用一个TextView意思一下
public DetailInfoFragment() {
// Required empty public constructor
}
// TODO: Rename and change types and number of parameters
public static DetailInfoFragment newInstance(int param) {
DetailInfoFragment fragment = new DetailInfoFragment();
Bundle args = new Bundle();
args.putInt(ARG_PARAM, param);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam = getArguments().getInt(ARG_PARAM);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view=inflater.inflate(R.layout.fragment_detail_info, container, false);
detail_text= (TextView) view.findViewById(R.id.detail_info);
//根据mParam来判断当前展示的是哪一页,根据页数的不同展示不同的信息
switch (mParam){
case 0:
detail_text.setText("内容1");
break;
case 1:
detail_text.setText("内容2");
break;
case 2:
detail_text.setText("内容3");
break;
case 3:
detail_text.setText("内容4");
break;
default:break;
}
return view;
}
}
5.创建DetailPageAdapter.java
该类继承自FragmentPagerAdapter
package com.example.lenovo.learningandroid;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* Created by WangHongbo on 2018/10/14.
*/
public class DetailPageAdapter extends FragmentPagerAdapter {
private static int PAGE_COUNT;//表示要展示的页面数量
private Context mContext;
public DetailPageAdapter(Context context, FragmentManager fm) {
super(fm);
this.mContext = context;
PAGE_COUNT=4;
}
@Override
public Fragment getItem(int position) {
return DetailInfoFragment.newInstance(position);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {//设置标题
switch (position) {
case 0:
return "页面一";
case 1:
return "页面二";
case 2:
return "页面三";
case 3:
return "页面四";
default:break;
}
return null;
}
}
6.创建MainActivity.java
在这里要用适配器将数据和视图绑定在一起
package com.example.lenovo.learningandroid;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private TabLayout mTabLayout;
private android.support.v4.app.FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
fm = getSupportFragmentManager();
// 为viewpager设置适配器
mViewPager.setAdapter(new DetailPageAdapter(MainActivity.this, fm));
mTabLayout.setupWithViewPager(mViewPager);
}
}
最后运行的结果是: