Android UI设计（引导界面）：ViewPager之界面添加底部圆点与循环显示

lewis 1年前 (2024-04-22) 阅读数 19 #技术

添加底部圆点一、方案一（通过自定义shape）

在布局中直接添加View对象，并设置background为未选中的shape。

布局：

<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"
    tools:context=".MainActivity"

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
    </android.support.v4.view.ViewPager>

    <LinearLayout 
         android:layout_width="match_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:orientation="vertical"
    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dip"
        android:gravity="center"      
        android:orientation="horizontal"  
         <View
            android:id="@+id/text1"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="2dip"
            android:layout_marginRight="2dip"
            android:layout_weight="1"
            android:background="@drawable/text_bg"

        <View
            android:id="@+id/text2"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="2dip"
            android:layout_marginRight="2dip"
            android:layout_weight="1"
            android:background="@drawable/text_bg"

        <View
            android:id="@+id/text3"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="2dip"
            android:layout_marginRight="2dip"
            android:layout_weight="1"
            android:background="@drawable/text_bg"

        <View
            android:id="@+id/text4"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="2dip"
            android:layout_marginRight="2dip"
            android:layout_weight="1"
            android:background="@drawable/text_bg"  
    </LinearLayout>
</LinearLayout>
</LinearLayout>

shape

text_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    android:useLevel="false">

   <solid android:color="#eee"/>
   <stroke android:width="1dp" android:color="#00ffffff"/> 

</shape>

text_bgpressed

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    android:useLevel="false">
   <solid android:color="#00ff00"/>
   <stroke android:width="1dp" android:color="#00ffffff"/> 

</shape>

MainActivity

package com.example.viewpagergongcheng;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity
    private List<View> mViews=new ArrayList<View>();;
    private MyPagerAdapter madapter;
    private ViewPager mviewpager;
    private int oldposition=0;
    private List<View> mview=new ArrayList<View>();
    private boolean flag=true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mviewpager = (ViewPager) findViewById(R.id.viewpager);
        View view1= findViewById(R.id.text1);
        View view2= findViewById(R.id.text2);
        View view3= findViewById(R.id.text3);
        View view4= findViewById(R.id.text4);
        mview.add(view1);
        mview.add(view2);
        mview.add(view3);
        mview.add(view4);
        /**
         * 为mViews初始化数据
         * */
       if(flag){
            mview.get(oldposition).setBackgroundResource(R.drawable.text_bgpressed);
            flag=false;
       }

        initData();
        madapter = new MyPagerAdapter(mViews);
        mviewpager.setAdapter(madapter);

        mviewpager.setPageTransformer(true, new DepthPageTransformer());
        //监听页面发生变化
        mviewpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                    mview.get(oldposition).setBackgroundResource(R.drawable.text_bg);
                    mview.get(arg0).setBackgroundResource(R.drawable.text_bgpressed);
                    oldposition=arg0;
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    private void initData() {
        View view1 = View.inflate(this, R.layout.view1, null);
        View view2 = View.inflate(this, R.layout.view2, null);
        View view3 = View.inflate(this, R.layout.view3, null);
        View view4 = View.inflate(this, R.layout.view4, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);
        mViews.add(view4);
    }

}

方案二（使用给定图片）

　　这里我们使用了上面给定的两个图片，通过在MainAcitivity中添加ImageView并设置ImageView的background来加入两个图片，通过监听页面的变化改变相应位置的圆点图片的改变。

布局

<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"
    tools:context=".MainActivity"

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
    </android.support.v4.view.ViewPager>

    <LinearLayout 
         android:layout_width="match_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:orientation="vertical"
              android:background="#00ff00"
    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dip"
        android:gravity="center"

        android:orientation="horizontal"    
    </LinearLayout>
</LinearLayout>
</LinearLayout>

MainActivity

package com.example.viewpagergongcheng;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity
    private List<View> mViews = new ArrayList<View>();;
    private MyPagerAdapter madapter;
    private ViewPager mviewpager;
    private LinearLayout mlinear;
    private List<ImageView> mviewpoint = new ArrayList<ImageView>();
    private boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mviewpager = (ViewPager) findViewById(R.id.viewpager);
        mlinear = (LinearLayout) findViewById(R.id.linear);
        for (int i = 0; i < 4; i++) {
            ImageView iv = new ImageView(this);
    //在activity中设置margin    
//  LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//  params.setMargins(10, 10, 10, 10);
//iv.setLayoutParams(params);
//设置宽度与高度，如果设置数值单位是px（像素），会有屏幕适配问题
            iv.setLayoutParams(new ViewGroup.LayoutParams(                  LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
            iv.setImageResource(R.drawable.kbc);//设置背景
            //  iv.setLeft(10);//距离父布局左侧边距
        //iv.layout(10, 10, 10, 10);//距离父布局上下左右侧边距
    iv.setPadding(calculateDpToPx(50), 0, 0, 0);//内部页边距
            mviewpoint.add(iv);//添加到list中
            mlinear.addView(iv);//将view添加到linearlayout布局下
        }
        mviewpoint.get(0).setImageResource(R.drawable.kbd);

        initData();
        madapter = new MyPagerAdapter(mViews);
        mviewpager.setAdapter(madapter);

        // mviewpager.setPageTransformer(true, new DepthPageTransformer());
        mviewpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                for (ImageView img : mviewpoint) {
                    img.setImageResource(R.drawable.kbc);
                }
                mviewpoint.get(arg0).setImageResource(R.drawable.kbd);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    private void initData() {
        View view1 = View.inflate(this, R.layout.view1, null);
        View view2 = View.inflate(this, R.layout.view2, null);
        View view3 = View.inflate(this, R.layout.view3, null);
        View view4 = View.inflate(this, R.layout.view4, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);
        mViews.add(view4);
    }
  /** 
     * 方法描述：把dp转换为px<br> 
     * @param tv 
     * @return 
    private int calculateDpToPx(int padding_in_dp){ 
            final float scale = getResources().getDisplayMetrics().density; 
            return  (int) (padding_in_dp * scale + 0.5f); 
    }
}

循环显示

　　下面图片展示的是从第一页开始左滑+右滑（实际上这是一种伪循环，当滑动次数超级多的时候还是会有滑到底的时候，并不是无限循环的）

　　为了循环显示我们在这里对adapter进行修改。
　　1、修改adapter中的getCount() 方法的返回值为Integer.MAX_VALUE。
　　2、为了能循环，初始化instantiateItem的返回的view也要进行循环。
3、为了能显示前一页必须在初始化中先remove再add并且在destroyItem()方法中不能进行销毁操作。
　　为了能够向右滑动修改Mainactivity中的内容
　　1、Mainactivity中的view和point也需要循环，position%mviews.size()。
　　2、将Integer.MAX_VALUE/2来设置当前界面左右两侧页面数量差不多，而Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%mViews.size()则是运行时显示的正好是第一页。
Adapter：

package com.example.viewpagergongcheng;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class MyPagerAdapter extends PagerAdapter{

     private List<View> mViews;
    public MyPagerAdapter(List<View> mViews) {
        super();
        this.mViews = mViews;

    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

    //  container.removeView(mViews.get(position));//要想实现循环，不能让移动后的view被remov掉
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        if(mViews.get(position%mViews.size()).getParent()!=null){
            //为了能够向右滑动
            container.removeView(mViews.get(position%mViews.size()));
        }
        container.addView(mViews.get(position%mViews.size()));
        return mViews.get(position%mViews.size());
    }

    /**
     * 返回页卡的数量
     * */

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return Integer.MAX_VALUE;//返回的数量是一个很大的数
    }
    /**
     * view是否来自于对象
     * */
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return

MainActivity：

package com.example.viewpagergongcheng;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity
    private List<View> mViews = new ArrayList<View>();;
    private MyPagerAdapter madapter;
    private ViewPager mviewpager;
    private LinearLayout mlinear;
    private List<ImageView> mviewpoint = new ArrayList<ImageView>();
    private boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mviewpager = (ViewPager) findViewById(R.id.viewpager);
        mlinear = (LinearLayout) findViewById(R.id.linear);
        for (int i = 0; i < 4; i++) {
            ImageView iv = new ImageView(this);
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.setMargins(10, 10, 10, 10);
            iv.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
            iv.setImageResource(R.drawable.kbc);
        //  iv.setLeft(10);//距离左侧margin
        //iv.layout(10, 10, 10, 10);//距离上下左右侧margin
        //  iv.setPadding(calculateDpToPx(50), 0, 0, 0);
            mviewpoint.add(iv);
            mlinear.addView(iv);
        }
        mviewpoint.get(0).setImageResource(R.drawable.kbd);

        initData();
        madapter = new MyPagerAdapter(mViews);

        mviewpager.setAdapter(madapter);
           mviewpager.setCurrentItem(Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%mViews.size());//设置当前界面
        // mviewpager.setPageTransformer(true, new DepthPageTransformer());
        mviewpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                for (ImageView img : mviewpoint) {
                    img.setImageResource(R.drawable.kbc);
                }
                mviewpoint.get(arg0%mviewpoint.size()).setImageResource(R.drawable.kbd);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    private void initData() {
        View view1 = View.inflate(this, R.layout.view1, null);
        View view2 = View.inflate(this, R.layout.view2, null);
        View view3 = View.inflate(this, R.layout.view3, null);
        View view4 = View.inflate(this, R.layout.view4, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);
        mViews.add(view4);
    }
       /** 
     * 方法描述：把dp转换为px<br> 
     * @param tv 
     * @return 
    private int calculateDpToPx(int padding_in_dp){ 
            final float scale = getResources().getDisplayMetrics().density; 
            return  (int) (padding_in_dp * scale + 0.5f); 
    }
}

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：云主机与独立服务器怎么区分？一文带你了解两者差异下一篇：基于node.js如何制作图片爬取功能

Android UI设计（引导界面）：ViewPager之界面添加底部圆点与循环显示

版权声明

作者文章