Android 布局

对Android提供的基本布局控件进行组合,可以实现一些相对复杂的效果,下面需要实现的效果如图:


Android 布局
Android 布局
  

header效果:
Android 布局
 

header.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="wrap_content" android:background="@android:drawable/title_bar">

    <Button
        android:id="@+id/header_button_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="@android:drawable/ic_media_rew" />

    <Button
        android:id="@+id/header_button_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@android:drawable/ic_media_ff" />

    <TextView
        android:id="@+id/header_text_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_centerInParent="true"
        android:text="文本信息"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

footer效果:
Android 布局
 

footer.xml文件:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:background="@android:drawable/title_bar">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center">

            <Button
                android:id="@+id/footer_a"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/alert_light_frame"
                android:text="A" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:orientation="vertical" android:layout_weight="1" android:gravity="center">

            <Button
                android:id="@+id/footer_b"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/alert_light_frame"
                android:text="B" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:orientation="vertical" android:layout_weight="1" android:gravity="center">

            <Button
                android:id="@+id/footer_c"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/alert_light_frame"
                android:text="C" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:orientation="vertical" android:layout_weight="1" android:gravity="center">

            <Button
                android:id="@+id/footer_d"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/alert_light_frame"
                android:text="D" />

        </LinearLayout>

    </LinearLayout>

activity_include.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:background="#cccccc">

        <LinearLayout
            android:id="@+id/top"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true" >
            
            <include layout="@layout/header" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/middle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/top" android:layout_above="@+id/bottom">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/bottom"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:layout_alignParentBottom="true">
            
            <include layout="@layout/footer" />
            
        </LinearLayout>

    </RelativeLayout>

 说明:

  • RelativeLayout内部分成top,middle,bottom三个LinearLayout,分别用于添加header,自定义布局,footer;
  • top填充顶部,bottom填充底部,middle填充剩余区域;
  • include标签导入外部layout文件;

下面是4个测试Activity的布局文件,基本类似,中间区域放置一个按钮,代码如下activity_a.xml:

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

    <Button
        android:id="@+id/activity_a_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A" />

</LinearLayout>

 剩下的activity_b.xml,activity_c.xml,activity_d.xml就不一一贴出了!:)

AActivity的代码如下:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;

public class AActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_a);

		findViewById(R.id.activity_a_button).setOnClickListener(
				new OnClickListener() {

					@Override
					public void onClick(View v) {
						Toast.makeText(AActivity.this, "This is activity a!", Toast.LENGTH_SHORT).show();
					}
				});

	}

}

说明:

  • 当点击按钮后,显示当前Activity信息;
  • 其它BActivity,CActivity,DActivity代码类似,不一一贴出了!:)

看看IncludeActivity的主要代码:

import android.app.ActivityGroup;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class IncludeActivity extends ActivityGroup implements OnClickListener {

	// Header
	private Button leftButtonHeader;
	private Button rightButtonHeader;
	private TextView centerTextHeader;

	// Footer
	private Button aButtonFooter;
	private Button bButtonFooter;
	private Button cButtonFooter;
	private Button dButtonFooter;
	
	private LinearLayout middleLayout;
	private View middleView;
	
	private LayoutParams layoutParams;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_include);
		
		setTitle("测试");

		// 获得Header部分的View引用
		leftButtonHeader = (Button) findViewById(R.id.header_button_left);
		rightButtonHeader = (Button) findViewById(R.id.header_button_right);
		centerTextHeader = (TextView) findViewById(R.id.header_text_center);

		// 获得Footer部分的View引用
		aButtonFooter = (Button) findViewById(R.id.footer_a);
		bButtonFooter = (Button) findViewById(R.id.footer_b);
		cButtonFooter = (Button) findViewById(R.id.footer_c);
		dButtonFooter = (Button) findViewById(R.id.footer_d);

		// 设置点击事件监听器
		leftButtonHeader.setOnClickListener(this);
		rightButtonHeader.setOnClickListener(this);
		
		aButtonFooter.setOnClickListener(this);
		bButtonFooter.setOnClickListener(this);
		cButtonFooter.setOnClickListener(this);
		dButtonFooter.setOnClickListener(this);
		
		layoutParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
		
		// 获得自定义View的父容器
		middleLayout = (LinearLayout) findViewById(R.id.middle);
		
		// 获得自定义View,并添加到当前布局
		middleView = getLocalActivityManager().startActivity(null, new Intent(this, AActivity.class)).getDecorView();
		middleLayout.addView(middleView, layoutParams);

	}

	@Override
	public void onClick(View v)getLocalActivityManager {
		
		switch (v.getId()) {
		case R.id.header_button_left:
			Toast.makeText(this, "左", Toast.LENGTH_SHORT).show();
			break;
		case R.id.header_button_right:
			Toast.makeText(this, "右", Toast.LENGTH_SHORT).show();
			break;
		case R.id.footer_a:
			Toast.makeText(this, "A", Toast.LENGTH_SHORT).show();
			middleLayout.removeAllViews();
			middleView = getLocalActivityManager().startActivity(null, new Intent(this, AActivity.class)).getDecorView();
			middleLayout.addView(middleView, layoutParams);
			break;
		case R.id.footer_b:
			Toast.makeText(this, "B", Toast.LENGTH_SHORT).show();
			middleLayout.removeAllViews();
			middleView = getLocalActivityManager().startActivity(null, new Intent(this, BActivity.class)).getDecorView();
			middleLayout.addView(middleView, layoutParams);
			break;
		case R.id.footer_c:
			Toast.makeText(this, "C", Toast.LENGTH_SHORT).show();
			middleLayout.removeAllViews();
			middleView = getLocalActivityManager().startActivity(null, new Intent(this, CActivity.class)).getDecorView();
			middleLayout.addView(middleView, layoutParams);
			break;
		case R.id.footer_d:
			Toast.makeText(this, "D", Toast.LENGTH_SHORT).show();
			middleLayout.removeAllViews();
			middleView = getLocalActivityManager().startActivity(null, new Intent(this, DActivity.class)).getDecorView();
			middleLayout.addView(middleView, layoutParams);
			break;
		default:
			break;
		}

	}

}

 说明:

  • middleLayout在重新添加View的时候,要先清除已有View,即:middleLayout.removeAllViews();
  • 通过getLocalActivityManager获得LocalActivityManager,然后在获得某个Activity对应的View,并添加到当前布局中;
  • 虽然AActivit的UI在IncludeActivity中显示,但是有关AActivity的UI操作和逻辑代码只要在AActivity中进行编写就可以了;
  • manifest文件中添加相关Activity的声明;
  • 关于添加其它Activity的UI到当前Activity的代码没有做性能测试,可能需要做调整,包括连续点击A,B,C,D按钮时,控制View是否添加等;

其它效果图片:


Android 布局
 
Android 布局
 
Android 布局
 
Android 布局
 
Android 布局
 
Android 布局
 

多说一句:主要内容是布局效果处理和ActivityGroup使用!:)记录点点滴滴,以备不时之需!=^_^=

相关推荐