打算做一个APP,第一步自然是先做布局拉!想做个标签页然后就用到了TabLayout和ViewPager,实现的效果就是这样
嗯。。。下面就说说我是怎么实现的把。
首先引入依赖包
嗯。。。我用的google官方的design提供的TabLayout,那么首先就是引入'com.android.support:design:25.0.0'包。
在主布局文件添加TabLayout和ViewPager
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="cc.jethro.peaseeds.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorHeight="4dp"
app:tabTextAppearance="@style/MyTabLayoutTextAppearance">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
布局中只有TabLayout和ViewPager组件
创建需要的标签布局和Fragment
- 创建XML布局文件(需要几个标签就创建几个XML布局文件)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:padding="16dp"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="分析"/>
</LinearLayout>
创建Fragment
/* *Fragment相当于就是一个Activity,他是依附到Activity上的,他具有很高灵活性,能随时添加和移除,Activity生命周期结束被销毁,Fragment也会被销毁。 */ package cc.jethro.peaseeds; import android.app.Fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by jethro on 2016/11/19. */ public class AnalysisFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //将刚才创建的对应的XML布局绑定到Fragment return inflater.inflate(R.layout.analysis_fragment, container, false); } }
创建Adapter适配器
/*
Adapter适配器就是把数据设置到界面上的
*/
package cc.jethro.peaseeds;
import android.app.Fragment;
import android.app.FragmentManager;
import android.support.v13.app.FragmentPagerAdapter;
/**
* Created by jethro on 2016/11/19.
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"记录", "分析", "我的"};
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0://这是第一个标签
return new RecordingFragment();
case 1://选中第二个标签时new一个Fragment对象返回给ViewPager,这个对象是那个分析界面
return new AnalysisFragment();
case 2:
return new UsrFragment();
default:
return new UsrFragment();
}
}
@Override
public int getCount() {
return mTitles.length;
}
//ViewPager与TabLayout绑定后,这里获取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
编辑MainActivity
package cc.jethro.peaseeds;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
//初始化组件
private TabLayout mtabLayout;
private ViewPager mviewPager;
private MyFragmentPagerAdapter mFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化视图
initViews();
}
/*
当用户点击"我的"这个标签里的登录按钮时,将"我的"这个标签里的Text View设置为"6666"
*/
public void login(View v) {
TextView textView = (TextView) findViewById(R.id.text2);
textView.setText("6666");
}
private void initViews() {
//使用适配器将ViewPager与Fragment绑定在一起
mviewPager = (ViewPager) findViewById(R.id.viewPager);
mFragmentPagerAdapter = new MyFragmentPagerAdapter(getFragmentManager());
mviewPager.setAdapter(mFragmentPagerAdapter);
//将Tab与ViewPager绑定在一起
mtabLayout = (TabLayout) findViewById(R.id.tabLayout);
mtabLayout.setupWithViewPager(mviewPager);
//获取指定位置的标签对象,页就是Tab,可以通过Tab对象修改标签的名字
one = mtabLayout.getTabAt(0);
two = mtabLayout.getTabAt(1);
three = mtabLayout.getTabAt(2);
}
}
"我的"标签里有一个Button和TextView
按下Button按钮后TextView会被设置为"6666"
到这里,这个效果就实现了,撒花~~~