android仿新浪引导界面

最近在研究如何做出仿微信，仿新浪等应用，第一次安装使用的使用展示应用程序的新特性和用法。

实现功能：左右手势滑屏

底部小圆点随当前显示页跳动

浮动按钮显示。当触屏事件发生显示，否则就渐渐消失

先转个文章：/article/1892196.html

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup + GestureDetector

第三种： ViewPager (Android3.0+)

第四种： ViewFlow (开源项目)

话不多说，先放上效果图


向右滑动，或者点击按钮向右


怎么样，是不是很心动~~~！哈哈、

实现左右滑屏是需要一个叫做ViewPager的东西。具体ViewPager怎么用我就不赘述了。（PS注意导入ViewPager的兼容包)

接下来是代码：

首先在main.xml中声明ViewPager：

[html] view
plaincopy

<LinearLayout

android:id="@+id/linearLayout01"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<android.support.v4.view.ViewPager

android:id="@+id/guidePages"

android:layout_width="fill_parent"

android:layout_height="fill_parent"/>

lt;/LinearLayout>

[html] view
plaincopy

和一个viewGroup放小圆点

[html] view
plaincopy

<LinearLayout

android:id="@+id/viewGroup"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="40dp"

android:gravity="center_horizontal"

android:orientation="horizontal" >

</LinearLayout>

接着在item01.xml等几个xml中放置要显示的图片,因为几个都一样，就不都贴上来了。

[html] view
plaincopy

<ImageView

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/feature_guide_0" >

</ImageView>

接下来是核心代码：

[java] view
plaincopy

public class GuideViewActivity extends Activity {

private ViewPager viewPager;

private ArrayList<View> pageViews;

private ImageView imageView;

private ImageView[] imageViews;

// 包裹滑动图片LinearLayout

private ViewGroup main;

// 包裹小圆点的LinearLayout

private ViewGroup group;

//左箭头按钮

private ImageView imageViewLeft;

//右箭头按钮

private ImageView imageViewRight;

//当前页码

private int currentIndex;

//ImageView的alpha值

private int mAlpha = 0;

private boolean isHide;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//将要显示的图片放到ArrayList当中，存到适配器中

LayoutInflater inflater = getLayoutInflater();

pageViews = new ArrayList<View>();

pageViews.add(inflater.inflate(R.layout.item01, null));

[java] view
plaincopy

...

[java] view
plaincopy

imageViews = new ImageView[pageViews.size()];

main = (ViewGroup)inflater.inflate(R.layout.main, null);

group = (ViewGroup)main.findViewById(R.id.viewGroup);

viewPager = (ViewPager)main.findViewById(R.id.guidePages);

imageViewLeft = (ImageView)main.findViewById(R.id.imageView1);

imageViewRight = (ImageView)main.findViewById(R.id.imageView2);

imageViewLeft.setAlpha(0);

imageViewRight.setAlpha(0);

//将小圆点放到imageView数组当中

for (int i = 0; i < pageViews.size(); i++) {

imageView = new ImageView(GuideViewActivity.this);

imageView.setLayoutParams(new LayoutParams(20,20));

imageView.setPadding(20, 0, 20, 0);

imageViews[i] = imageView;

if (i == 0) {

//默认选中第一张图片

imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);

} else {

imageViews[i].setBackgroundResource(R.drawable.page_indicator);

}

group.addView(imageViews[i]);

}

setContentView(main);

viewPager.setAdapter(new GuidePageAdapter());

viewPager.setOnPageChangeListener(new GuidePageChangeListener());

imageViewLeft.setOnClickListener(new ButtonListener());

imageViewRight.setOnClickListener(new ButtonListener());

}

//左右切换屏幕的按钮监听器

class ButtonListener implements OnClickListener{

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

int showNext=0;

if(v.getId() == R.id.imageView1) {

System.out.println("点击了向左的按钮");

if(currentIndex ==0 )

showNext = currentIndex;

else

showNext = currentIndex-1;

viewPager.setCurrentItem(showNext);

}

if(v.getId() == R.id.imageView2){

System.out.println("点击了向右的按钮");

if(currentIndex == imageViews.length)

showNext = currentIndex;

else

showNext = currentIndex+1;

viewPager.setCurrentItem(showNext);

}

System.out.println("当前页码："+showNext);

}

}

/**

* 设置按钮渐显效果

*/

private Handler mHandler = new Handler()

{

public void handleMessage(Message msg) {

if(msg.what==1 && mAlpha<255){

//通过设置不透明度设置按钮的渐显效果

mAlpha += 50;

if(mAlpha>255)

mAlpha=255;

imageViewLeft.setAlpha(mAlpha);

imageViewLeft.invalidate();

imageViewRight.setAlpha(mAlpha);

imageViewRight.invalidate();

if(!isHide && mAlpha<255)

mHandler.sendEmptyMessageDelayed(1, 100);

}else if(msg.what==0 && mAlpha>0){

mAlpha -= 3;

if(mAlpha<0)

mAlpha=0;

imageViewLeft.setAlpha(mAlpha);

imageViewLeft.invalidate();

imageViewRight.setAlpha(mAlpha);

imageViewRight.invalidate();

if(isHide && mAlpha>0)

mHandler.sendEmptyMessageDelayed(0, 2);

}

}

};

private void showImageButtonView(){

isHide = false;

mHandler.sendEmptyMessage(1);

}

private void hideImageButtonView(){

new Thread(){

public void run() {

try {

isHide = true;

mHandler.sendEmptyMessage(0);

} catch (Exception e) {

;

}

}

}.start();

}

@Override

public boolean dispatchTouchEvent(MotionEvent ev) {

System.out.println("this is dispatch");

System.out.println("触碰屏幕");

switch (ev.getAction()) {

case MotionEvent.ACTION_MOVE:

case MotionEvent.ACTION_DOWN:

showImageButtonView();

break;

case MotionEvent.ACTION_UP:

hideImageButtonView();

break;

}

return super.dispatchTouchEvent(ev);

}

// 指引页面数据适配器,实现适配器方法

class GuidePageAdapter extends PagerAdapter {

@Override

public int getCount() {

return pageViews.size();

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}

@Override

public int getItemPosition(Object object) {

// TODO Auto-generated method stub

return super.getItemPosition(object);

}

@Override

public void destroyItem(View arg0, int arg1, Object arg2) {

// TODO Auto-generated method stub

((ViewPager) arg0).removeView(pageViews.get(arg1));

}

@Override

public Object instantiateItem(View arg0, int arg1) {

// TODO Auto-generated method stub

((ViewPager) arg0).addView(pageViews.get(arg1));

return pageViews.get(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

}

@Override

public void finishUpdate(View arg0) {

// TODO Auto-generated method stub

}

}

// 指引页面更改事件监听器,左右滑动图片时候，小圆点变换显示当前图片位置

class GuidePageChangeListener implements OnPageChangeListener {

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

// TODO Auto-generated method stub

}

@Override

public void onPageSelected(int arg0) {

currentIndex = arg0;

for (int i = 0; i < imageViews.length; i++) {

imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);

if (arg0 != i) {

imageViews[i].setBackgroundResource(R.drawable.page_indicator);

}

}

}

}