Android之Viewpager結合Fragment使用（二）(TabHost)

效果圖：實現了底部導航

---

一、activity_tab_view_pager.xml：ViewPager用於滑動View

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >


        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/tab_divider"
            />

        <!--  內容區域      -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            android:layout_above="@id/tab_divider"
            />

        <!--  用線隔開      -->
        <View
            android:id="@+id/tab_divider"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000"
            android:layout_above="@android:id/tabs"
            />
        
        
        <!-- 導航部分      -->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            />

    </RelativeLayout>

</TabHost>

---

二、test_fragment.xml：子項（碎片）的佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/app_name"
        android:textSize="36sp"
        android:gravity="center"
        android:layout_centerInParent="true"
        />
 
</RelativeLayout>

---

三、TestFragment

package com.example.viewpagerproject3;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;


/**
 * Created by TMJ on 2020-02-05.
 */
public class TestFragment extends Fragment {


    public static final String POSITION = "position";
    private String mPosition;


    /**
     * new一個TestFragment，傳入包含數據的bundle，返回
     * @param position
     * @return
     */
    public static TestFragment newInstance(int position){

        TestFragment fragment=new TestFragment();

        Bundle bundle=new Bundle();
        bundle.putInt(POSITION,position);

        //傳入參數爲：Bundle
        fragment.setArguments(bundle);

        return fragment;
    }


    /**
     * 在onCreate裏接收數據
     * @param savedInstanceState
     */
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //拿到數據
        if (getArguments() != null){
            //將getArguments().getInt(POSITION)轉化成String類型
            mPosition = String.valueOf(getArguments().getInt(POSITION));

        }


    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {


        View view=inflater.inflate(R.layout.test_fragment,null);

        //view.findViewById，是在view裏查找
        TextView textView=(TextView)view.findViewById(R.id.text_view);
        //傳入內容
        textView.setText(mPosition);

        return view;
    }
}

---

四、TabViewPagerActivity

package com.example.viewpagerproject3;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

/**
 * ViewPager與Fragment結合使用
 */
public class TabViewPagerActivity extends AppCompatActivity {


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

        //初始化總佈局
        ViewPager viewPager=(ViewPager)findViewById(R.id.viewPager);


        //設置adapter:參數爲FragmentPagerAdapter
        /*
         * FragmentPagerAdapter構造方法需要傳參數：FragmentManager
         * 需要重寫兩個方法
         */
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            @NonNull
            @Override
            public Fragment getItem(int position) {
                //返回傳入了位置信息的TestFragment
                return TestFragment.newInstance(position);

            }

            @Override
            public int getCount() {

                return 4;
            }
        });

    }



}