Android View 滑屏初探

本文介绍了一种自定义的Android ViewGroup组件,能够实现类似Launcher的左右滑动切换屏幕效果。通过创建多个等宽高的子View并使用scrollTo方法进行内容平移,实现了流畅的屏幕切换体验。


效果就是类似launcher, 可以左右滑动一屏。

思路:

自定义ViewGroup,  从左到右摆放子View, 每个子View的宽高等于屏幕宽高, 滑动时通过scrollTo / scrollBy移动内容来显示每一子View(每个子View占满一屏), 做到切换的效果。


public class MultiViewGroup extends ViewGroup {

	private Context mContext;

	private static String TAG = "MultiViewGroup";

	public MultiViewGroup(Context context) {
		super(context);
		mContext = context;
		init();
	}

	public MultiViewGroup(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		init();
	}

	private void init() {
		// 初始化3个 LinearLayout控件
		LinearLayout oneLL = new LinearLayout(mContext);
		oneLL.setBackgroundColor(Color.RED);
        addView(oneLL);
		
		LinearLayout twoLL = new LinearLayout(mContext);
		twoLL.setBackgroundColor(Color.YELLOW);
		addView(twoLL);
		
		LinearLayout threeLL = new LinearLayout(mContext);
		threeLL.setBackgroundColor(Color.BLUE);
		addView(threeLL);
	}

	// measure过程
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

		Log.i(TAG, "--- start onMeasure --");

		// 设置该ViewGroup的大小
		int width = MeasureSpec.getSize(widthMeasureSpec);
		int height = MeasureSpec.getSize(heightMeasureSpec);
		setMeasuredDimension(width, height);

		int childCount = getChildCount();
		Log.i(TAG, "--- onMeasure childCount is -->" + childCount);
		for (int i = 0; i < childCount; i++) {
			View child = getChildAt(i);
			// 设置每个子视图的大小 , 即全屏
			child.measure(MultiScreenActivity.screenWidth, MultiScreenActivity.scrrenHeight);
		}
	}

	// layout过程
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		// TODO Auto-generated method stub
		Log.i(TAG, "--- start onLayout --");
		int startLeft = 0; // 每个子视图的起始布局坐标
		int startTop = 10; // 间距设置为10px 相当于 android:marginTop= "10px"
		int childCount = getChildCount();
		Log.i(TAG, "--- onLayout childCount is -->" + childCount);
		for (int i = 0; i < childCount; i++) {
			View child = getChildAt(i);
			child.layout(startLeft, startTop, 
					startLeft + MultiScreenActivity.screenWidth, 
					startTop + MultiScreenActivity.scrrenHeight);
			startLeft = startLeft + MultiScreenActivity.screenWidth ; //校准每个子View的起始布局位置
			//三个子视图的在屏幕中的分布如下 [0 , 320] / [320,640] / [640,960]
		}
	}

}


布局:

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

	<TextView android:layout_width="fill_parent" android:id="@+id/tv_hello"
		android:layout_height="wrap_content" android:text="@string/hello" />

	<com.qin.scrollerview.MultiViewGroup
		android:id="@+id/mymultiViewGroup" android:layout_below="@id/tv_hello"
		android:layout_height="wrap_content" android:layout_width="wrap_content">
	</com.qin.scrollerview.MultiViewGroup>
	
	<Button android:id="@+id/bt_scrollLeft"
		android:layout_alignParentBottom="true" android:layout_width="200dip"
		android:layout_height="wrap_content" android:text="Prev" />

	<Button android:id="@+id/bt_scrollRight" android:layout_width="200dip"
		android:layout_toRightOf="@id/bt_scrollLeft"
		android:layout_alignParentBottom="true" android:layout_height="wrap_content"
		android:text="Next" />
</RelativeLayout>

Activity:

//带有可以切换屏的Activity
public class MultiScreenActivity extends Activity implements OnClickListener {

	private Button bt_scrollLeft;
	private Button bt_scrollRight;
	private MultiViewGroup mulTiViewGroup  ;
	
	public static int screenWidth  ;  // 屏幕宽度
	public static int scrrenHeight ;  //屏幕高度
	
	private int curscreen = 0;   // 当前位于第几屏幕  ,共3个"屏幕", 3个LinearLayout
	
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
        //获得屏幕分辨率大小
		DisplayMetrics metric = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(metric);
		screenWidth = metric.widthPixels ;
		scrrenHeight = metric.heightPixels;		
		System.out.println("screenWidth * scrrenHeight --->" + screenWidth + " * " +scrrenHeight);
		
		setContentView(R.layout.multiview);
 
        //获取自定义视图的空间引用
		mulTiViewGroup = (MultiViewGroup)findViewById(R.id.mymultiViewGroup);
		
		bt_scrollLeft = (Button) findViewById(R.id.bt_scrollLeft);
		bt_scrollRight = (Button) findViewById(R.id.bt_scrollRight);

		bt_scrollLeft.setOnClickListener(this);
		bt_scrollRight.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub

		switch (v.getId()) {
		case R.id.bt_scrollLeft:
			if(curscreen > 0) {  //防止屏幕越界
			    curscreen -- ;
			    Toast.makeText(MultiScreenActivity.this, "第" +(curscreen+1) + "屏", 300).show();
			}
			else
				Toast.makeText(MultiScreenActivity.this, "当前已是第一屏",300).show();
			mulTiViewGroup.scrollTo(curscreen * screenWidth , 0);
			break;
		case R.id.bt_scrollRight:
			if (curscreen < 2 ){ //防止屏幕越界
				curscreen ++ ;
				Toast.makeText(MultiScreenActivity.this, "第" + (curscreen+1) + "屏", 300).show();
			}
			else
				Toast.makeText(MultiScreenActivity.this, "当前已是最后一屏",300).show();
			mulTiViewGroup.scrollTo(curscreen * screenWidth, 0);
			break;
		}
	}

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值