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>