0906Android基础ViewPager+Fragment

于 2015-09-06 22:57:46 发布
阅读量678 收藏
点赞数
分类专栏： Android基础碎片 文章标签： android viewpager 代码 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/DDDebussy/article/details/48252883
版权

Fragment

　　参考http://blog.youkuaiyun.com/guolin_blog/article/details/8881711
http://blog.youkuaiyun.com/lmj623565791/article/details/42628537

ViewPager的Demo

　
　　基础部分参考harvic880925的博客
http://blog.youkuaiyun.com/harvic880925/article/details/38453725　　

原理部分

　　按照写代码的顺序一步一步添加

建立List对象添加view,在适配器中重写构造方法传入mViews.在适配器中继承PagerAdapter，并重写四个方法（详情请参考顶部链接）。

    private LayoutInflater mInflater;
    private List<View> mViews;

        mViews = new ArrayList<>();
        mInflater = getLayoutInflater();
        View view1 = mInflater.inflate(R.layout.viewpager_item1, null);
        View view2 = mInflater.inflate(R.layout.viewpager_item2, null);
        View view3 = mInflater.inflate(R.layout.viewpager_item3, null);

        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);
        myViewPagerAdapter = new MyViewPagerAdapter(mViews);
        mViewPager.setAdapter(myViewPagerAdapter);

实现PagerTabStrip

extends PagerTitleStrip
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.support.v4.view.PagerTitleStrip
↳ android.support.v4.view.PagerTabStrip

在mainactivity中设置他的各项属性，背景色之类的。然后重载适配器的构造器，将PagerTabStrip的文本部分传入。适配器中在复写一个方法getPageTitle,返回文本部分

    @Override
    public CharSequence getPageTitle(int position) {
        return mPagerTab.get(position);
    }
        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pagerTabStrip);
//        设置背景色,文字颜色等属性
        mPagerTabStrip.setBackgroundColor(Color.GRAY);
        mPagerTabStrip.setTabIndicatorColor(Color.BLACK);
        mPagerTabStrip.setTextColor(Color.WHITE);
        mPagerTabStrip.setDrawFullUnderline(true);

        mPagerTab = new ArrayList<>();
        mPagerTab.add("标题1");
        mPagerTab.add("标题2");
        mPagerTab.add("标题3");
        myViewPagerAdapter = new MyViewPagerAdapter(mViews, mPagerTab);    
        mViewPager.setAdapter(myViewPagerAdapter);

这里写图片描述

动态添加圆点

　　找到布局中的LinearLayout的id并创建对象，通过它的add方法将自定义的view添加到LinearLayout布局中。通过ViewPager.addOnPageChangeListener中的onPageSelected实现非本界面的点和本界面的点不是同一个颜色。

         private LinearLayout mLinearContainer;

 //        动态添加
        mDots = new ArrayList<>();
//        循环加入圆点
        for (int x = 0; x < mViews.size(); x++) {
//        创建imageview对象
            ImageView iv1 = new ImageView(this);
//        设置宽高,间距，其实直接设置iv1的padding也可以，效果是一样的，但是原理不一样。 iv1.setPadding();
//            iv1.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(15, 15);
            lp.setMargins(10, 0, 10, 0);//直接设置的话单位是像素
            iv1.setLayoutParams(lp);

//        设置图片
            iv1.setImageResource(R.drawable.dot);
//        添加到Linearlayout中
            mLinearContainer.addView(iv1);
//        添加到数组中
            mDots.add(iv1);
        }
//        设置第一个图片中的点为蓝色
        mDots.get(0).setImageResource(dot_focus);
         mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
//                设置其他的点为灰色
                for (ImageView iv : mDots) {
                    iv.setImageResource(R.drawable.dot);
                }
//                设置选中的点为蓝色
                mDots.get(position % mViews.size()).setImageResource(dot_focus);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

实现循环显示

　　实际上是一个假的循环。getCount()返回Integer.MAX_VALUE，即添加非常多的页面。然后通过ViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % mViews.size());来将页面设置在中间部分（实现左滑右滑）。因为添加的view只有三个，而返回的界面有很多个（position会很多），所以在初始化页面等设置中，原先的position要换成position%mViews.size()来定位view。
　　另外，由于一个view只能有一个parent，即只能被一个界面掉用，所以一个view已经被加载后如果再次调用就需要移除掉，然后重新加载。因为初始化中已经进行了手动移除view，destroyItem中就不用移除view了。

 @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view=mViews.get(position%mViews.size());
//        需要用的view已经被加载后如果再次调用就需要移除掉，然后重新加载
        if(view.getParent()!=null){
            container.removeView(view);
        }
        container.addView(view);
   }
     @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
    }

这里写图片描述

全部代码

活动

//mainactivity
package com.example.laowang.myviewpager;

import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.laowang.myviewpager.adapter.MyViewPagerAdapter;

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

import static com.example.laowang.myviewpager.R.drawable.dot;
import static com.example.laowang.myviewpager.R.drawable.dot_focus;

public class MainActivity extends Activity {
    private ViewPager mViewPager;
    private LayoutInflater mInflater;
    private List<View> mViews;
    private MyViewPagerAdapter myViewPagerAdapter;
    private List<ImageView> mDots;
    private LinearLayout mLinearContainer;
    private PagerTabStrip mPagerTabStrip;
    private List<String> mPagerTab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //去除标题栏，这样界面感觉会好看点,必须在setContentView()方法前。
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
//        mPagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagerTitleStrip);
        mLinearContainer = (LinearLayout) findViewById(R.id.linear_container);
        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.pagerTabStrip);
//        设置背景色,文字颜色等属性
        mPagerTabStrip.setBackgroundColor(Color.GRAY);
        mPagerTabStrip.setTabIndicatorColor(Color.BLACK);
        mPagerTabStrip.setTextColor(Color.WHITE);
        mPagerTabStrip.setDrawFullUnderline(true);


        mViews = new ArrayList<>();
        mInflater = getLayoutInflater();
        View view1 = mInflater.inflate(R.layout.viewpager_item1, null);
        View view2 = mInflater.inflate(R.layout.viewpager_item2, null);
        View view3 = mInflater.inflate(R.layout.viewpager_item3, null);

        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);

//        加tab内容
        mPagerTab = new ArrayList<>();
        mPagerTab.add("标题1");
        mPagerTab.add("标题2");
        mPagerTab.add("标题3");

//        动态添加
        mDots = new ArrayList<>();
        for (int x = 0; x < mViews.size(); x++) {
//        创建imageview对象
            ImageView iv1 = new ImageView(this);
//        设置宽高,间距，其实直接设置iv1的padding也可以，效果是一样的，但是原理不一样。 iv1.setPadding();
//            iv1.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(15, 15);
            lp.setMargins(10, 0, 10, 0);
            iv1.setLayoutParams(lp);//直接设置的话单位是像素

//        设置图片
            iv1.setImageResource(R.drawable.dot);
//        添加到Linearlayout中
            mLinearContainer.addView(iv1);
//        添加到数组中
            mDots.add(iv1);
        }
//        设置第一个图片中的点为蓝色
        mDots.get(0).setImageResource(dot_focus);

        myViewPagerAdapter = new MyViewPagerAdapter(mViews, mPagerTab);
        mViewPager.setAdapter(myViewPagerAdapter);
//      使图片能够一开始往左滑,将图片设置到中间一部分
        mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % mViews.size());
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
//                设置其他的点为灰色
                for (ImageView iv : mDots) {
                    iv.setImageResource(R.drawable.dot);
                }
//                设置选中的点为蓝色
                mDots.get(position % mViews.size()).setImageResource(dot_focus);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

适配器

package com.example.laowang.myviewpager.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

import com.example.laowang.myviewpager.MainActivity;
import com.example.laowang.myviewpager.R;

import java.util.List;

/**
 * Created by Administrator on 2015/9/1.
 */
public class MyViewPagerAdapter extends PagerAdapter {
    private List<View> mViews;
    private List<String> mPagerTab;



    public MyViewPagerAdapter(List<View> mViews,List<String> mPagerTab) {
        this.mViews = mViews;
        this.mPagerTab = mPagerTab;
    }


    @Override
    public CharSequence getPageTitle(int position) {
        return mPagerTab.get(position%mViews.size());
    }

    public MyViewPagerAdapter(List<View> mViews) {
        this.mViews = mViews;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view=mViews.get(position%mViews.size());
//        需要用的view已经被加载后如果再次调用就需要移除掉，然后重新加载
        if(view.getParent()!=null){
            container.removeView(view);
        }
        container.addView(view);
//        第三个界面，也就是position==2的界面有button
        if(position%mViews.size()==2){
            Button button= (Button) view.findViewById(R.id.button);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
//                    v表示该界面内可见的所有的控件
                    Toast.makeText(v.getContext(),"我是第三个界面",Toast.LENGTH_SHORT).show();
                }
            });
        }
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
//        container.removeView(mViews.get(position%mViews.size()));
//        用于循环是屏蔽这一块
//        View view=mViews.get(position);
//        container.removeView(view);
    }

    @Override
    public int getCount() {
//        return mViews.size();
//        用于循环显示页面，设置返回一个最大值
        return Integer.MAX_VALUE;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
}

布局

//activity_main
<FrameLayout 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:gravity="center"
    tools:context=".MainActivity">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            />
    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/linear_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="horizontal"
        android:gravity="center">
    </LinearLayout>
 </FrameLayout>

//viewpager_item1
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#923cde51"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是第一个界面"
        android:textAppearance="@android:style/TextAppearance.Large"/>

</LinearLayout>

//viewpager_item2
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#ff766e" android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="@android:style/TextAppearance.Large"
    android:text="我是第二个界面"/>
</LinearLayout>


//viewpager_item3
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#7ec7ff">
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="三"/>
</LinearLayout>

//drawable/dot练手随便画的
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:type="radial"
        android:gradientRadius="300dp"
        android:startColor="#6f9cdbe8"
        android:centerColor="#629cdbe8"
        android:endColor="#0079fa59"
        android:angle="270"></gradient>
    <corners android:radius="300dp"/>

</shape>

//drawable/dot_focus
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:type="radial"
        android:gradientRadius="300dp"
        android:startColor="#e88d83"
        android:centerColor="#9CDBE8"
        android:endColor="#0079fa59"
        android:angle="270"></gradient>
    <corners android:radius="300dp"/>

</shape>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值