进阶3之Android UI介面之（QQ介面滑动）

学的到东西的事情是锻炼，学不到的是磨练。

本讲内容：QQ介面滑动

下面是效果面

下面是res/layout/activity_main.xml 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/root"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.qq.MainActivity$PlaceholderFragment" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/default_bg"        android:orientation="vertical" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="6.0"            android:orientation="horizontal" >            <RelativeLayout                android:id="@+id/layout1"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_weight="1.0" >                <ImageView                    android:id="@+id/tab1"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true"                    android:src="@drawable/tab1" />            </RelativeLayout>            <RelativeLayout                android:id="@+id/layout2"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_weight="1.0" >                <ImageView                    android:id="@+id/tab2"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true"                    android:src="@drawable/tab2" />            </RelativeLayout>            <RelativeLayout                android:id="@+id/layout3"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_weight="1.0" >                <ImageView                    android:id="@+id/tab3"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerInParent="true"                    android:src="@drawable/tab3" />            </RelativeLayout>        </LinearLayout>        <RelativeLayout            android:id="@+id/bodylayout"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_weight="1.0"            android:background="#fff"            android:gravity="center"            android:orientation="horizontal" >        </RelativeLayout>    </LinearLayout></RelativeLayout>

下面是res/drawabel/tab1.xml 

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/tab1_over" android:state_pressed="true"/>    <item android:drawable="@drawable/tab1_normal" android:state_pressed="false"/>    <!-- 用来区分点击前后，可以是俩张图片 --></selector>

下面是res/drawabel/tab2.xml 

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@drawable/tab2_over" />    <item android:state_pressed="false" android:drawable="@drawable/tab2_normal" /></selector>

下面是res/drawabel/tab3.xml 

<?xml version="1.0" encoding="UTF-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" android:drawable="@drawable/tab3_over" />    <item android:state_pressed="false" android:drawable="@drawable/tab3_normal" /></selector>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <ImageView        android:id="@+id/imageView1"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/splash" /></LinearLayout>

下面是res/layout/tab2.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">        <ImageView         android:id="@+id/imageView2"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/splash2"/></LinearLayout>

下面是res/layout/tab3.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">        <ImageView         android:id="@+id/imageView3"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/splash3"/></LinearLayout>

public class MainActivity extends ActivityGroup {	private RelativeLayout layout;		private RelativeLayout layout1;	private RelativeLayout layout2;	private RelativeLayout layout3;		private RelativeLayout bodylayout;		private ImageView tab1;	private ImageView tab2;	private ImageView tab3;	private ImageView first;	private int current=1;//默认选中第一个，可以动态的改变此参数值	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);		initUI();	}		private void initUI() {		layout=(RelativeLayout) findViewById(R.id.root);				layout1=(RelativeLayout) findViewById(R.id.layout1);		layout2=(RelativeLayout) findViewById(R.id.layout2);		layout3=(RelativeLayout) findViewById(R.id.layout3);		bodylayout=(RelativeLayout) findViewById(R.id.bodylayout);				tab1=(ImageView) findViewById(R.id.tab1);		tab2=(ImageView) findViewById(R.id.tab2);		tab3=(ImageView) findViewById(R.id.tab3);		tab1.setOnClickListener(onClickListener);		tab2.setOnClickListener(onClickListener);		tab3.setOnClickListener(onClickListener);				RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);		p.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);		first=new ImageView(this);		first.setTag("first");		first.setImageResource(R.drawable.topbar_select);				// 默认选中项		switch (current) {		case 1:			layout1.addView(first, p);			current=R.id.tab1;			break;		case 2:			layout2.addView(first, p);			current = R.id.tab2;			break;		case 3:			layout3.addView(first, p);			current = R.id.tab3;			break;		default:			break;		}				View view = getLocalActivityManager().startActivity("index",				new Intent(MainActivity.this, Tab1.class))				.getDecorView();		bodylayout.addView(view);			}	private boolean isAdd=false; // 是否添加过 top_select	private int select_width;    // top_select_width	private int select_height;   // top_select_height	private int firstLeft;       // 第一次添加后的左边距*****	private int startLeft;       // 起始左边距	// 添加一个view，移除一个view	private void replace() {		switch (current) {		case R.id.tab1:			changeTop(layout1);			break;		case R.id.tab2:			changeTop(layout2);			break;		case R.id.tab3:			changeTop(layout3);			break;		default:			break;		}	}		private void changeTop(RelativeLayout relativeLayout) {		ImageView old=(ImageView) relativeLayout.findViewWithTag("first");		select_width=old.getWidth();		select_height=old.getHeight();				RelativeLayout.LayoutParams p=new RelativeLayout.LayoutParams(select_width, select_height);				p.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();		p.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop();				// 获取起始位置		firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();				ImageView iv = new ImageView(this);		iv.setTag("move");		iv.setImageResource(R.drawable.topbar_select);				layout.addView(iv , p);		relativeLayout.removeView(old);	}		private OnClickListener onClickListener = new OnClickListener(){		public void onClick(View v) {			if(!isAdd){				replace(); // 初次使用移除old 添加新的top_select为RelativeLayout所使用				isAdd = true;			}						ImageView top_select = (ImageView) layout.findViewWithTag("move");			int tabLeft;			int endLeft = 0;						boolean run = false;			switch (v.getId()) {			case R.id.tab1:				if (current != R.id.tab1) {					// 中心位置					tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2;					// 最终位置					endLeft = tabLeft - select_width / 2;					current = R.id.tab1;					run = true;					bodylayout.removeAllViews();					View view = getLocalActivityManager().startActivity("index",							new Intent(MainActivity.this, Tab1.class))							.getDecorView();					bodylayout.addView(view);				}				break;			case R.id.tab2:				if (current != R.id.tab2) {					tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2;					endLeft = tabLeft - select_width / 2;					current = R.id.tab2;					run = true;					bodylayout.removeAllViews();					View view = getLocalActivityManager().startActivity("index",							new Intent(MainActivity.this, Tab2.class))							.getDecorView();					bodylayout.addView(view);				}				break;			case R.id.tab3:				if (current != R.id.tab3) {					tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2;					endLeft = tabLeft - select_width/2;					current = R.id.tab3;					run = true;					bodylayout.removeAllViews();					View view = getLocalActivityManager().startActivity("index",							new Intent(MainActivity.this, Tab3.class))							.getDecorView();					bodylayout.addView(view);				}				break;			default:				break;			}						if(run){				TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);				startLeft = endLeft - firstLeft; // 重新设定起始位置				animation.setDuration(400);				animation.setFillAfter(true);				top_select.bringToFront();				top_select.startAnimation(animation);			}					}	};}

public class Tab1 extends Activity {	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.tab1);	}}

下面是Tab2.java界面文件：

public class Tab2 extends Activity{	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.tab2);	}}

下面是Tab3.java界面文件：

public class Tab3 extends Activity{	@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.tab3);	}}