TabLayout与ViewPager的辛酸往事

打算做一个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

  1. 创建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>
  1. 创建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"
login


到这里,这个效果就实现了,撒花~~~

添加新评论