【UI交互效果】android UI效果三: 滚动切换屏幕

效果如下:

主要有3个类1个layout:

Activity: ScrollViewTestActivity, 两个自定义View, 1个 ScrollView用来控制滑动效果, 1个PageControlView,用来控制下方显示的处在第几屏.

1个mian.xml

Activity:

import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.ImageView;public class ScrollViewTestActivity extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        ScrollView sv = (ScrollView)findViewById(R.id.scroll);        ImageView iv = new ImageView(this);        iv.setImageDrawable(this.getResources().getDrawable(R.drawable.a1));        sv.addView(iv);        sv.addView(View.inflate(this, R.layout.layout_0, null));        ImageView iv2 = new ImageView(this);        iv2.setImageDrawable(getResources().getDrawable(R.drawable.a2));        sv.addView(iv2);                PageControlView pageControl = (PageControlView)findViewById(R.id.pageControl);        sv.setOnScreenChangeListener(pageControl);                sv.initPageControlView();    }}

　ScrollView:

import android.content.Context;import android.util.AttributeSet;import android.view.GestureDetector;import android.view.GestureDetector.SimpleOnGestureListener;import android.view.MotionEvent;import android.view.View;import android.view.ViewConfiguration;import android.view.ViewGroup;import android.widget.Scroller;public class ScrollView extends ViewGroup{private GestureDetector gesture;private Context context;private boolean fling;private Scroller scroller;private OnScreenChangeListener onScreenChangeListener;public ScrollView(Context context) {super(context);this.context = context;gesture = new GestureDetector(context,new GestureListener());scroller = new Scroller(context);}public ScrollView(Context context,AttributeSet att){super(context,att);this.context = context;gesture = new GestureDetector(context,new GestureListener());scroller = new Scroller(context);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {for(int i=0;i<getChildCount();i++){View child  = (View)getChildAt(i);child.measure(r-l, b-t);child.layout(getWidth()*i, 0, getWidth()*(i+1), getHeight());}}@Overridepublic boolean onTouchEvent(MotionEvent ev){gesture.onTouchEvent(ev);switch(ev.getAction()){case MotionEvent.ACTION_MOVE:break;case MotionEvent.ACTION_UP:System.out.println("action_up...");if(!fling){scrollToScreen();}fling = false;break;}return true;}/** * 用来计算拖动一段距离后，要显示哪个界面 */private void scrollToScreen(){int leftWidth = getScrollX();int tabs = leftWidth/getWidth();int len = leftWidth - tabs*getWidth();if(len<getWidth()/2){//scrollTo(tabs*getWidth(),0);scroller.startScroll(leftWidth, 0, -len, 0, len*2);}else{//scrollTo((tabs+1)*getWidth(),0);scroller.startScroll(leftWidth, 0, getWidth()-len, 0, len*2);tabs = tabs + 1;}if(onScreenChangeListener!=null){onScreenChangeListener.screenChange(tabs, getChildCount());}invalidate();}@Override      public void computeScroll() {          if (scroller.computeScrollOffset()) {              scrollTo(scroller.getCurrX(), 0);              postInvalidate();          }      }class GestureListener extends SimpleOnGestureListener{            @Override          public boolean onDoubleTap(MotionEvent e){              return super.onDoubleTap(e);          }            @Override          public boolean onDown(MotionEvent e){              return super.onDown(e);          }            @Override          public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY){              if(Math.abs(velocityX)>ViewConfiguration.get(context).getScaledMinimumFlingVelocity()){            scrollToScreen();            fling = true;}return true;        }                  @Override        public void onShowPress(MotionEvent e){        super.onShowPress(e);        }                @Override          public void onLongPress(MotionEvent e){              super.onLongPress(e);          }            @Override          public boolean onScroll(MotionEvent e1, MotionEvent e2,float distanceX, float distanceY){              if(distanceX>0&&getScrollX()<(getChildCount()-1)*getWidth()||distanceX<0&&getScrollX()>0){scrollBy((int)distanceX,0);}return true;        }            @Override          public boolean onSingleTapUp(MotionEvent e){              return super.onSingleTapUp(e);          }}public interface OnScreenChangeListener {void screenChange(int currentTab,int totalTab);}public void setOnScreenChangeListener(OnScreenChangeListener onScreenChangeListener){this.onScreenChangeListener = onScreenChangeListener;}public void initPageControlView(){if(onScreenChangeListener!=null){onScreenChangeListener.screenChange(0, getChildCount());}}}

　　PageControlView:

import com.yang.testscroll.ScrollView.OnScreenChangeListener;import android.content.Context;import android.util.AttributeSet;import android.widget.ImageView;import android.widget.LinearLayout;public class PageControlView extends LinearLayout implements OnScreenChangeListener{private Context context;public PageControlView(Context context) {super(context);this.context = context;}public PageControlView(Context context,AttributeSet attr){super(context,attr);this.context = context;}@Overridepublic void screenChange(int currentTab, int totalTab) {this.removeAllViews();for(int i=0;i<totalTab;i++){ImageView iv = new ImageView(context);if(i==currentTab){iv.setImageResource(R.drawable.page_indicator_focused);}else{iv.setImageResource(R.drawable.page_indicator);}this.addView(iv);}}}

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.yang.testscroll.ScrollView
        android:id="@+id/scroll"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
    
    <com.yang.testscroll.PageControlView
        android:id="@+id/pageControl"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:background="#8f00000f" 
        android:gravity="center"/>
    
</RelativeLayout>

更多相关文章

随机推荐