ViewPager每页包含多个item

最新推荐文章于 2018-10-10 15:07:53 发布

blog_Lei

最新推荐文章于 2018-10-10 15:07:53 发布

阅读量770

点赞数 1

CC 4.0 BY-SA版权

分类专栏：自定义控件文章标签： viewpager多个item viewpager

本文链接：https://blog.youkuaiyun.com/sinat_27681957/article/details/51146032

自定义控件专栏收录该内容

7 篇文章

订阅专栏

(转载请说明来处，谢谢) 最近在帮公司做一个智能家居的项目，其中用到了viewpager的滑动，滑动可以切换view，并且每个view中还有多个item，于是想把自己简单的demo分享一下！

直接上代码了，有一些代码或者类是多余的，请大家酌情处理，我懒得改了。。。。。。。

布局文件：

<RelativeLayout 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"
    tools:context=".fragment.HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <include android:id="@+id/include_title" layout="@layout/home_title_bar"></include>

    <!--   RelativeLayout  Top   -->
    <RelativeLayout
        android:id="@+id/rl_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="15dp"
        android:paddingBottom="5dp"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:layout_below="@+id/include_title"
        android:background="#DDDDDD">
        <!--big image-->
        <RelativeLayout
            android:id="@+id/rl_top_first"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/rl_top_big_image"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:src="@drawable/view2"
                android:layout_gravity="center_horizontal|top" />

            <ImageView
                android:id="@+id/rl_top_icon_image"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_below="@+id/rl_top_big_image"
                android:src="@drawable/keting2"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:layout_toRightOf="@+id/rl_top_icon_image"
                android:layout_below="@+id/rl_top_big_image"
                android:gravity="center"
                android:text="客厅"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:layout_marginRight="0dp"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/rl_top_big_image"
                android:gravity="center"
                android:text="进入房间>>"
                android:id="@+id/rl_top_tv" />

        </RelativeLayout>

    </RelativeLayout>

    <!--   LinearLayout  Detail  -->
    <LinearLayout
        android:id="@+id/ll_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rl_top">

        <!--房间湿度-->
        <RelativeLayout
            android:id="@+id/rl_detail_shi_du"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:background="@drawable/ll_detail_bg"
            android:gravity="center">
            <TextView
                android:id="@+id/tv_shi_du"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="25sp"
                android:text="50%"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_shi_du"
                android:text="房间湿度"/>
        </RelativeLayout>
        <!--温度-->
        <RelativeLayout
            android:id="@+id/rl_detail_wen_du"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:background="@drawable/ll_detail_bg"
            android:gravity="center"
            android:layout_weight="1">

            <TextView
                android:id="@+id/tv_wen_du"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="25sp"
                android:text="15%"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_wen_du"
                android:text="房间温度"/>
        </RelativeLayout>
        <!--灯光模式-->
        <RelativeLayout
            android:id="@+id/rl_detail_mo_shi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:background="@drawable/ll_detail_bg"
            android:gravity="center"
            android:layout_weight="1">
            <TextView
                android:id="@+id/tv_mo_shi"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="25sp"
                android:text="夜间"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_mo_shi"
                android:text="灯光模式"/>
        </RelativeLayout>

    </LinearLayout>

    <!-- RelativeLayout advice-->
    <RelativeLayout
        android:id="@+id/rl_advice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:layout_below="@+id/ll_detail"
        android:background="@drawable/ll_detail_bg"
        android:gravity="center">

        <TextView
            android:id="@+id/rl_advice_detail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="检测到室内温度偏低，系统已自动开启空调"/>

    </RelativeLayout>

    <!-- FrameLayout Bottom-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_alignParentBottom="true">
        <!--  ViewPager  -->
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.v4.view.ViewPager>
        <!--  指示器  -->
        <LinearLayout
            android:id="@+id/ll"
            android:layout_gravity="bottom"
            android:layout_width="fill_parent"
            android:layout_height="25dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/iv1"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:src="@drawable/dot_selected" />

            <ImageView
                android:id="@+id/iv2"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginRight="5dp"
                android:layout_marginLeft="5dp"
                android:src="@drawable/dot_normal" />

            <ImageView
                android:id="@+id/iv3"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:src="@drawable/dot_normal" />
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

JAVA文件：

package com.lei.myapplication.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.lei.myapplication.R;
import com.lei.myapplication.adapter.ViewPagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class HomeFragment extends Fragment implements ViewPager.OnPageChangeListener{

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
    private ImageView[] dots;
    private int[] ids={R.id.iv1,R.id.iv2,R.id.iv3};
    private int[] imgids={R.id.iv1,R.id.iv2,R.id.iv3, R.drawable.keting2,R.drawable.keting2,R.drawable.keting2};
    private static int page=0;//默认房间滑动页
    ImageView img1,img2,img3,img4;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view=inflater.inflate(R.layout.fragment_home, container, false);
        return view;

    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initView();
        initDots();
    }
    private void initView() {
        
        LayoutInflater inflater=LayoutInflater.from(getActivity());
        views=new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.three, null));

        vpAdapter = new ViewPagerAdapter(views, getActivity());
        vp = (ViewPager) getActivity().findViewById(R.id.viewpager);
        vp.setAdapter(vpAdapter);
        vp.setOnPageChangeListener(this);

    }

    private void initDots(){
        dots=new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++) {
            dots[i]=(ImageView) getActivity().findViewById(ids[i]);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }


    public void onPageSelected(int position) {
        page=position+1;
        // 指示器操作
        for (int i = 0; i < views.size(); i++) {
            if (position==i) {
                dots[i].setImageResource(R.drawable.dot_selected);
            }else {
                dots[i].setImageResource(R.drawable.dot_normal);
            }
        }

           /* //布局的注册
            img1=(ImageView)views.get(page).findViewById(R.id.img_1);
            img1.setOnClickListener(this);
            img2=(ImageView)views.get(page).findViewById(R.id.img_2);
            img2.setOnClickListener(this);
            img3=(ImageView)views.get(page).findViewById(R.id.img_3);
            img3.setOnClickListener(this);
            img4=(ImageView)views.get(page).findViewById(R.id.img_4);
            img4.setOnClickListener(this);*/
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

}

adapter文件:

package com.lei.myapplication.adapter;

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

public class ViewPagerAdapter extends PagerAdapter {

   private List<View> views;
   private Context context;
   
   
   public ViewPagerAdapter(List<View> views, Context context){
      
      this.views=views;
      this.context=context;
   }
   
   //  ����views
   public void destroyItem(View container, int position, Object arg2) {

      ((ViewPager) container).removeView(views.get(position));
      
   }
/* @Override
   public void destroyItem(View container, int position, Object object) {

      ((ViewPager) container).removeView(views.get(position));
   }*/

   @Override
   public void finishUpdate(View arg0) {
      // TODO Auto-generated method stub
      
   }

   // ����
   @Override
   public int getCount() {
      return views.size();
   }

   
   // ����view
   public Object instantiateItem(View container, int position) {
      
      ((ViewGroup) container).addView(views.get(position));
      return views.get(position);
   }

   @Override
   public boolean isViewFromObject(View arg0, Object arg1) {
      return (arg0==arg1) ;
   }

   @Override
   public void restoreState(Parcelable arg0, ClassLoader arg1) {
      // TODO Auto-generated method stub
      
   }

   @Override
   public Parcelable saveState() {
      // TODO Auto-generated method stub
      return null;
   }

   @Override
   public void startUpdate(View arg0) {
      // TODO Auto-generated method stub
      
   }

}