viewPage使用

最新推荐文章于 2020-11-26 08:19:30 发布

weixin_41069726

最新推荐文章于 2020-11-26 08:19:30 发布

阅读量342

点赞数

分类专栏： android

本文链接：https://blog.youkuaiyun.com/weixin_41069726/article/details/103701450

版权

android 专栏收录该内容

94 篇文章

订阅专栏

这篇博客主要介绍了Android中ViewPager的使用，包括如何在Activity中配置XML布局文件，以及如何结合Fragment实现页面滑动切换。通过自定义View的方式，详细阐述了ViewPager在实际应用中的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 Activity

package com.chxblu.test.myapplication;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.SparseArray;
import android.view.View;
import android.view.ViewGroup;

import com.chxblu.test.myapplication.fragment.TabFragment;
import com.chxblu.test.myapplication.view.TabView;

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

public class MainActivityWithTab extends AppCompatActivity {
    ViewPager mVpMain;
    private List<String> mTitles = new ArrayList<>(Arrays.asList("微信", "通讯录", "关于", "我"));

    private TabView tbWechat, tbFind, tbAbout, tbMe;
    SparseArray<TabFragment> sparseArray = new SparseArray<>();
    private List<TabView> mTbs = new ArrayList<>();
    private static final String BUNDLE_KEY_POS = "bundle_key_pos";
    private int mCurTabPos =0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_tab);
        if(savedInstanceState!=null){
            mCurTabPos = savedInstanceState.getInt(BUNDLE_KEY_POS);
        }
        initViews();
        initViewPage();
        initEvents();

    }

    private void initEvents() {
        for (int i = 0; i < mTbs.size(); i++) {
            final TabView tabView = mTbs.get(i);
            final int finalI = i;
            tabView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mVpMain.setCurrentItem(finalI);
                    setCurrentTab(finalI);
                }
            });
        }
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt(BUNDLE_KEY_POS, mVpMain.getCurrentItem());
    }

    private void initViews() {
        tbWechat = findViewById(R.id.tb_wechat);
        tbFind = findViewById(R.id.tb_find);
        tbAbout = findViewById(R.id.tb_about);
        tbMe = findViewById(R.id.tb_me);
        tbWechat.setIconAndText(R.drawable.wechar, R.drawable.wecharselect, "微信");
        tbFind.setIconAndText(R.drawable.find, R.drawable.findselect, "发现");
        tbAbout.setIconAndText(R.drawable.txl, R.drawable.txlselect, "通讯录");
        tbMe.setIconAndText(R.drawable.me, R.drawable.meselect, "我");


        mTbs.add(tbWechat);
        mTbs.add(tbFind);
        mTbs.add(tbAbout);
        mTbs.add(tbMe);
        setCurrentTab(mCurTabPos);
    }

    private void initViewPage() {
        mVpMain = findViewById(R.id.vp_main);
        mVpMain.setOffscreenPageLimit(mTitles.size());
        mVpMain.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                TabFragment tabFragment = TabFragment.newInstance(mTitles.get(i));
                return tabFragment;
            }

            @Override
            public int getCount() {
                return mTitles.size();
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                TabFragment tabFragment = (TabFragment) super.instantiateItem(container, position);
                sparseArray.put(position, tabFragment);
                return tabFragment;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position,
                                    @NonNull Object object) {
                sparseArray.remove(position);
                super.destroyItem(container, position, object);
            }
        });

        mVpMain.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
                if (v > 0) {
                    TabView left = mTbs.get(i);
                    TabView right = mTbs.get(i + 1);
                    left.setProgress((1 - v));
                    right.setProgress(v);
                }

            }

            @Override
            public void onPageSelected(int i) {

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    private void setCurrentTab(int position) {
        for (int i = 0; i < mTbs.size(); i++) {
            TabView tabView = mTbs.get(i);
            if (i == position) {
                tabView.setProgress(1);
            } else {
                tabView.setProgress(0);
            }
        }
    }
}

activity对应的 xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">


    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        tools:context=".MainActivity"></android.support.v4.view.ViewPager>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ccc"></View>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#eee"
        android:paddingTop="8dp"
        android:paddingBottom="8dp">

        <com.chxblu.test.myapplication.view.TabView
            android:id="@+id/tb_wechat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="微信" />

        <com.chxblu.test.myapplication.view.TabView
            android:id="@+id/tb_find"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="发现" />

        <com.chxblu.test.myapplication.view.TabView  //自定义View
            android:id="@+id/tb_about"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="关于" />

        <com.chxblu.test.myapplication.view.TabView
            android:id="@+id/tb_me"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="我" />
    </LinearLayout>
</LinearLayout>

3 自定义View

package com.chxblu.test.myapplication.view;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.chxblu.test.myapplication.R;

public class TabView extends FrameLayout {
    private ImageView icon,iconSelct;
    private TextView tv_title;
    private static final int COLOR_DEFAULT= Color.parseColor("#ff000000");
    private static final int COLOR_SELECT = Color.parseColor("#FF45C01A");
    public TabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        View view = inflate(context, R.layout.tab_view, this);
        icon = view.findViewById(R.id.iv_icon);
        iconSelct = view.findViewById(R.id.iv_iconselect);
        tv_title = view.findViewById(R.id.tv_title);
        setProgress(0);
    }

    public void setIconAndText(int iconId,int iconselectId,String title){
        icon.setImageResource(iconId);
        iconSelct.setImageResource(iconselectId);
        tv_title.setText(title);
    }

    public void setProgress(float progress){
        icon.setAlpha(1-progress);
        iconSelct.setAlpha(progress);
        tv_title.setTextColor(evaluate(progress,COLOR_DEFAULT,COLOR_SELECT));
    }
    public int evaluate(float fraction, int  startValue, int endValue) {
        int startInt = (Integer) startValue;
        float startA = ((startInt >> 24) & 0xff) / 255.0f;
        float startR = ((startInt >> 16) & 0xff) / 255.0f;
        float startG = ((startInt >>  8) & 0xff) / 255.0f;
        float startB = ( startInt        & 0xff) / 255.0f;

        int endInt = (Integer) endValue;
        float endA = ((endInt >> 24) & 0xff) / 255.0f;
        float endR = ((endInt >> 16) & 0xff) / 255.0f;
        float endG = ((endInt >>  8) & 0xff) / 255.0f;
        float endB = ( endInt        & 0xff) / 255.0f;

        // convert from sRGB to linear
        startR = (float) Math.pow(startR, 2.2);
        startG = (float) Math.pow(startG, 2.2);
        startB = (float) Math.pow(startB, 2.2);

        endR = (float) Math.pow(endR, 2.2);
        endG = (float) Math.pow(endG, 2.2);
        endB = (float) Math.pow(endB, 2.2);

        // compute the interpolated color in linear space
        float a = startA + fraction * (endA - startA);
        float r = startR + fraction * (endR - startR);
        float g = startG + fraction * (endG - startG);
        float b = startB + fraction * (endB - startB);

        // convert back to sRGB in the [0..255] range
        a = a * 255.0f;
        r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
        g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
        b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

        return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
    }

}

viewPage用的fragment

package com.chxblu.test.myapplication.fragment;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.chxblu.test.myapplication.MainActivity;
import com.chxblu.test.myapplication.R;
import com.chxblu.test.myapplication.utils.L;

public class TabFragment extends Fragment {
    private TextView mTvTitle;
    private String mTitle;
    private static final String  BUNDLE_TITLE = "key_title";
    private OnTitleClickListen mListen;
    public static interface OnTitleClickListen{
        void onClick(String  title);
    }

    public void  setTitleClickListen(OnTitleClickListen listen){
        mListen=listen;
    }
    public static TabFragment newInstance(String title){
        Bundle bundle = new Bundle();
        bundle.putString(BUNDLE_TITLE,title);
        TabFragment tabFragment = new TabFragment();
        tabFragment.setArguments(bundle);
        return  tabFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle arguments = getArguments();
        if(arguments!=null){
            mTitle=arguments.getString(BUNDLE_TITLE,"");
        }

    }

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

        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mTvTitle = view.findViewById(R.id.tv_title);
        mTvTitle.setText(mTitle);
        mTvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mListen!=null){
                    mListen.onClick("wechat changed");
                }
            }
        });
    }



    public void changeTitle (String mTitle){
        if(!isAdded()){
            return;
        }
        if(!isResumed()){
            return;
        }
        mTvTitle.setText(mTitle);
    }
}