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

最新推荐文章于 2023-05-28 17:20:02 发布

小小劲

最新推荐文章于 2023-05-28 17:20:02 发布

阅读量216

点赞数 1

本文链接：https://blog.csdn.net/liguojin1230/article/details/44208273

版权

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

本讲内容：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>

在3个relativelayout外面加个LinearLayout，然后3个relativelayout属性中设置android:layout_weight="1"，使之平均

下面是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>

下面是res/layout/tab1.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/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>

下面是MainActivity.java主界面文件：

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);
			}
			
		}

	};

}

下面是Tab1.java界面文件：

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);
	}
}

本讲就到这里，Take your time and enjoy it