您的位置:首页 > 其它

layout_weight属性的再认识

2013-11-04 15:21 106 查看
package cc.testlayout_weight;

import android.os.Bundle;
import android.app.Activity;
import android.view.ViewTreeObserver;
import android.widget.TextView;
/**
 * Demo描述:
 * layout_weight属性的再认识
 * 
 * 原理说明:
 * layout_weight的意思是:
 * 按照权重比例分享剩余空间的大小
 * 什么意思呢?
 * 一个通俗的例子:
 * 一个水平方向的线性布局,每个控件大小均为20,屏幕宽度为480
 * 那么剩余空间大小为480-(20+20+20)=420
 * 假设他们的layout_weight分别为 1 2 3
 * 那么按照权重他们分别分得剩余空间为
 * 420*(1/6)=70
 * 420*(2/6)=140
 * 420*(3/6)=210
 * 
 * 所以每个控件实际分得空间大小为
 * 20+70=90
 * 20+140=160
 * 210+20=230
 * 
 * 步骤说明:
 * 在线性布局中使用layout_weight属性
 * 第一步:
 * 不考虑layout_weight属性,明确各控件所占空间的原始大小且计算它们共需要占的空间大小
 * 第二步:
 * 利用总空间大小(如屏幕宽度)-它们共需要占的空间大小=剩余空间
 * 第三步:
 * 计算每个控件最终分得的空间大小
 * 最终大小=原始大小+按照比例分得的剩余空间
 * 
 * 
 * 示例1:
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2" />

    <TextView
        android:id="@+id/thirdTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ff5600"
        android:gravity="center"
        android:text="3" />

</LinearLayout>
 *
 * 分析说明:
 * 第一个TextView的宽为wrap_content,且没有设置layout_weight属性
 * 第二及三个TextView的宽为wrap_content,均设置layout_weight属性
 * 所以剩余空间为:
 * 480-(12+12+12)=444
 * 由于第一个TextView没有设置layout_weight,所以它的大小就是12.
 * 由于第二及三个TextView均设置layout_weight属性.所以这两者会
 * 按照比例来分享剩余的444空间,均分得444*(1/2)=222.
 * 所以第二及三个的宽度均为:原本的12+剩余空间分得的222=234
 * 
 * 在这个例子中我们每个TextView的显示内容均很简单都是一个数字而已.
 * 所以在不考虑layout_weight属性的情况下他们的宽度都是wrap_content即12.
 * 那么要是我们在第二个TextView中显示的内容比较长,比如"22222222".
 * 那么他们的第二及三个TextView所占的长度还和刚才一样么?显示不一样.
 * 因为TextView的长度是由wrap_content指定的.
 * 在不考虑layout_weight属性的情况下,它的长度当然是由其内容决定的.
 * 要明白这个简单的道理.不能很生硬地照搬.
 * 
 * 
 * 示例2:
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="0dip"
        android:layout_weight="2"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2222222222222222222" />

    <TextView
        android:id="@+id/thirdTextView"
        android:layout_width="0dip"
        android:layout_weight="3"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:text="3" />

</LinearLayout>

 * 
 * 分析说明:
 * 这三个TextView的宽度均设置为0dip.并且均设置了layout_weight属性
 * 所以剩余空间为:
 * 480-(0+0+0)=480
 * 现在再按照权重来分享剩余空间
 * 第一个TextView所分到的宽度为:480*(1/6)=80
 * 第二个TextView所分到的宽度为:480*(2/6)=160
 * 第三个TextView所分到的宽度为:480*(3/6)=240
 * 所以它们最终所占宽度为:
 * 第一个TextView 0+80=80;
 * 第二个TextView 0+160=160;
 * 第三个TextView 0+240=240;
 * 
 * 所以在这里例子中提示我们:
 * 如果要按照一定的比重来平分空间.我们可以将这些空间的宽度
 * 均设置为0,且分别设置比重即可.
 * 
 * 示例3:
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="fill_parent"
        android:layout_weight="2"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2222222222222222222" />

    <TextView
        android:id="@+id/thirdTextView"
        android:layout_width="fill_parent"
        android:layout_weight="3"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:text="3" />

</LinearLayout>
 * 
 * 分析说明:
 * 我们只是在示例2的基础上做了很小的修改,让每个TextView的的宽度均为fill_parent
 * 那么在不考虑layout_weight属性的时候每个TextView所占的大小均为480.
 * 所以剩余空间为:
 * 480-(480+480+480)=-960
 * 所以每个TextView分到的剩余空间为:
 * 第一个TextVeiw -960*(1/6)=-160
 * 第二个TextVeiw -960*(2/6)=-320
 * 第三个TextVeiw -960*(6/6)=-480
 * 所以它们最终所占宽度为:
 * 第一个TextView 480+(-160)=320;
 * 第二个TextView 480+(-320)=160;
 * 第三个TextView 480+(-480)=0;
 * 
 * 
 * 示例4:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="fill_parent"
        android:layout_weight="2"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2222222222222222222" />

    <TextView
        android:id="@+id/thirdTextView"
        android:layout_width="fill_parent"
        android:layout_weight="3"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:text="3" />

</LinearLayout>
 * 
 * 分析说明:
 * 在示例3的基础上做了很小的修改,让第一个TextView的的宽度为wrap_content
 * 其余两个均为fill_parent
 * 所以在不考虑layout_weight属性的时候它们分别占空间为:
 * 12 480 480
 * 所以剩余空间为:
 * 480-(12+480+480)=-492
 * 所以每个TextView分到的剩余空间为:
 * 第一个TextVeiw -492*(1/6)=-82
 * 第二个TextVeiw -492*(2/6)=-164
 * 第三个TextVeiw -492*(3/6)=-246
 * 所以它们最终所占宽度为:
 * 第一个TextView 12+(-82)=-70;
 * 第二个TextView 480+(-164)=316;
 * 第三个TextView 480+(-246)=234;
 * 
 * 测试设备:
 * Android2.3.3
 * 854x480
 * 
 * 参考资料:
 * 1 http://blog.csdn.net/xiaanming/article/details/13630837  * 2 http://blog.csdn.net/dazlly/article/details/13767343  *  Thank you very much
 *
 */
public class MainActivity extends Activity {
   private TextView mFirstTextView;
   private TextView mSecondTextView;
   private TextView mThirdTextView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		init();
	}

	private void init() {
		mFirstTextView = (TextView) findViewById(R.id.firstTextView);
		mSecondTextView=(TextView) findViewById(R.id.secondTextView);
		mThirdTextView=(TextView) findViewById(R.id.thirdTextView);
		ViewTreeObserver mViewTreeObserver = mFirstTextView.getViewTreeObserver();
		mViewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
					public boolean onPreDraw() {
						int first_height = mFirstTextView.getMeasuredHeight();
						int first_width = mFirstTextView.getMeasuredWidth();
						int second_height = mSecondTextView.getMeasuredHeight();
						int second_width = mSecondTextView.getMeasuredWidth();
						int third_height = mThirdTextView.getMeasuredHeight();
						int third_width = mThirdTextView.getMeasuredWidth();
						System.out.println("first_width=" + first_width+ ",first_height=" + first_height);
						System.out.println("second_width=" + second_width+ ",second_height=" + second_height);
						System.out.println("third_width=" + third_width+ ",third_height=" + third_height);
						return true;
					}
				});
	}

}


main.xml如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="#0045f5"
        android:gravity="center"
        android:text="1" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="fill_parent"
        android:layout_weight="2"
        android:layout_height="wrap_content"
        android:background="#00ff47"
        android:gravity="center"
        android:text="2222222222222222222" />

    <TextView
        android:id="@+id/thirdTextView"
        android:layout_width="fill_parent"
        android:layout_weight="3"
        android:layout_height="wrap_content"
        android:background="#ff5600"
        android:gravity="center"
        android:text="3" />

</LinearLayout>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: