Android UI设计(引导界面):ViewPager之界面添加底部圆点与循环显示
2015-09-04 22:36
706 查看
添加底部圆点
一、方案一(通过自定义shape)
在布局中直接添加View对象,并设置background为未选中的shape。
布局:
[code]<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[code]<?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
[code]<?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
[code]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来加入两个图片,通过监听页面的变化改变相应位置的圆点图片的改变。
布局
[code]<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
[code]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:
[code]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 arg0==arg1; } }
MainActivity:
[code]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); } }
相关文章推荐
- easyui中Tab的tools按钮刷新当前tab
- Caffe学习:build/tools/compute_image_mean
- Android学习——Android界面UI
- Caffe学习:build/tools/convert_imageset
- hdu 1005 Number Sequence(找规律)
- UITableView(表视图)
- 模拟赛心得体会&COCI2014/2015CONTEST #3 silueta&strojopis
- UI控件圆角设置
- 使用UITextField自动格式化银行卡号
- MongoVUE破解
- Leveraging Big Data Technologies to Build a Common Repository for Security
- iOS中UITableView--(从plist读取数据到model,实现懒加载, TableView的数据加载)
- iOS高级-QuartzCore框架-CoreAnimation和UIView动画的使用
- Nqueen2.0
- Drillbench Cemcalc v3.9 1CD(动态固井设计分析软件)/Drillbench Suite v6.1 1CD(钻井作业设计及规划软件)
- android ui ->>Dialog对话框
- iPhone开发之手势的预习—— UITapGestureRecognizer pinch捏合 longPress长按 rotation旋转
- hdu(5301)——Buildings
- iOS:UIImageView图像视图控件
- 点击UITableView的cell展开收缩