欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TabLayout和ViewPager、Fragment的滑动页面的实现

程序员文章站 2022-07-13 16:36:14
...

首先自定义Fragment和创建Fragment 对应的Layout

package com.example.administrator.viewpagertablayouttest;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

@SuppressLint("ValidFragment")
public class MyFragment extends Fragment {
    public String title;
    public String content;
    public int img;
    private View view;
    
    public MyFragment() {
   
    }
    public MyFragment(String title, String content, int img) {
        this.title = title;
        this.content = content;
        this.img = img;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_layout,container,false);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        TextView titleTxt = view.findViewById(R.id.frag_title);
        TextView contentTxt = view.findViewById(R.id.frag_content);
        ImageView imgView = view.findViewById(R.id.frag_img);
        titleTxt.setText(title);
        contentTxt.setText(content);
        imgView.setImageResource(img);
    }

    public String getTitle() {
        return title;
    }

    public String getContent() {
        return content;
    }

    public int getImg() {
        return img;
    }
}

<?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="horizontal">
    <ImageView
        android:layout_gravity="center"
        android:id="@+id/frag_img"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:src="@drawable/a"/>
    <LinearLayout
        android:layout_gravity="center"
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="200dp">
    <TextView
        android:id="@+id/frag_title"
        android:layout_gravity="center"
        android:text="南山"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:layout_marginTop="15dp"
        android:id="@+id/frag_content"
        android:text="南山,古称南头。先秦时期属百越,秦汉之时,南山属南海郡辖;汉代南头为盐官驻地;三国时设置司盐都尉所,并在南头城修筑司盐都尉垒,称“芜城”。"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

然后自定义Adapter

package com.example.administrator.viewpagertablayouttest;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentAdapter extends FragmentPagerAdapter {
    public List<MyFragment> myFragmentList;

    public MyFragmentAdapter(FragmentManager fm, List<MyFragment> myFragmentList) {
        super(fm);
        this.myFragmentList = myFragmentList;
    }

    @Override
    public Fragment getItem(int i) {
        return myFragmentList.get(i);
    }

    @Override
    public int getCount() {
        return myFragmentList.size();
    }
    public String getPageTitle(int i){
        return myFragmentList.get(i).getTitle();
    }
}

最后在MainActivity中实现布局

package com.example.administrator.viewpagertablayouttest;

import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private String[] contents = new String[]{"123","456","789"};
    private String[] titles = new String[]{"ab","cd","ef"};
    private int[] imgs = new int[]{R.drawable.a,R.drawable.c,R.drawable.b};
    private List<MyFragment> myFragmentList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabLayout tabLayout = findViewById(R.id.tab);
        ViewPager pager = findViewById(R.id.pager);
        initView();
        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),myFragmentList);
        pager.setAdapter(adapter);
        tabLayout.setupWithViewPager(pager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }

    private void initView() {
        for (int i = 0; i < contents.length; i++) {
            myFragmentList.add(new MyFragment(titles[i],contents[i],imgs[i]));
        }
    }
}

MainActivity的布局

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v4.view.ViewPager>

</LinearLayout>
相关标签: 移动开发