Android 增强版百分比布局库 为了适配而扩展
2015-07-07 11:33 208 0
http://blog.csdn.net/lmj623565791/article/details/46767825£»
±¾Îijö×Ô:¡¾ÕźèÑóµÄ²©¿Í¡¿
Ò» ¸ÅÊö
ÉÏÖÜÒ»ÎÒÃÇ·¢²¼ÁËAndroid °Ù·Ö±È²¼¾Ö¿â(percent-support-lib) ½âÎöÓëÀ©Õ¹ÖжÔpercent-supportÕâ¸ö¿â½øÐÐÁ˽âÎöºÍÌí¼ÓÁËPercentLinearLayoutµÄÖ§³Ö¡£
ÄÇôΪʲô±¾Æª²©¿ÍµÄ´æÔÚµÄÒâÒåÊÇʲôÄØ£¿
Ê×ÏÈÎÒÃǻعËÏ°ٷֱȲ¼¾Ö¿âµÄÓ÷¨£¬ÌṩÁËPercentRelativeLayout¡¢PercentFrameLayout¹©´ó¼ÒÔÚ±àдµÄʱºò£¬¶ÔÓÚÒÔÏÂÊôÐÔ£º
layout_widthPercent¡¢layout_heightPercent¡¢
layout_marginPercent¡¢layout_marginLeftPercent¡¢
layout_marginTopPercent¡¢layout_marginRightPercent¡¢
layout_marginBottomPercent¡¢layout_marginStartPercent¡¢layout_marginEndPercent¡£
¿ÉÒÔʹÓðٷֱȽøÐÐÉèÖÃ¿í¡¢¸ß¡¢±ß¾à£¬µÄÈ·¸øÎÒÃÇÔÚÊÊÅäÉÏÌṩÁ˼«´óµÄ±ãÀû£¬µ«ÊÇÔÚʹÓùý³ÌÖУ¬¾õµÃ´æÔÚһЩ³¡¾°ÎÞ·¨µÃµ½Âú×㡣ʲô³¡¾°ÄØ£¿ÏÂÃæÎÒ¾Ù¼¸¸öÀý×Ó¡£
-
µ±Ê¹ÓÃͼƬʱ£¬ÎÞ·¨ÉèÖÿí¸ßµÄ±ÈÀý
±ÈÈçÎÒÃǵÄͼƬ¿í¸ßÊÇ200*100µÄ£¬ÎÒÃÇÔÚʹÓùý³ÌÖÐÎÒÃÇÉèÖÿí¸ßΪ20%¡¢10%£¬ÕâÑù»áÔì³ÉͼƬµÄ±ÈÀýʧµ÷¡£ÎªÊ²Ã´ÄØ£¿ÒòΪ20%²Î¿¼µÄÊÇÆÁÄ»µÄ¿í¶È£¬¶ø10%²Î¿¼µÄÊÇÆÁÄ»µÄ¸ß¶È¡£
-
ºÜÄÑʹÓðٷֱȶ¨ÒåÒ»¸öÕý·½ÐεĿؼþ
±ÈÈ磬ÎÒÏÖÔÚ½çÃæµÄÓÒϽÇÓÐÒ»¸öFloatingActionButton£¬ÎÒÏ£ÍûÆä¿í¶ÈºÍ¸ß¶È¶¼ÎªÆÁÄ»¿í¶ÈµÄ10%£¬ºÜÄÑ×öµ½¡£
-
Ò»¸ö¿Ø¼þµÄmarginËĸö·½ÏòÖµÒ»ÖÂ
ÓÐЩʱºò£¬ÎÒÉèÖÃmargin£¬ÎÒÏ£ÍûËıߵı߾àÒ»Öµģ¬µ«ÊÇÈç¹ûÄ¿Ç°ÉèÖÃ5%£¬»áÔì³É£¬ÉÏÏÂΪ¸ß¶ÈµÄ5%£¬×óÓұ߾àΪ¿í¶ÈµÄ5%¡£
×ÛºÏÉÏÊöÕâЩÎÊÌ⣬¿ÉÒÔ·¢ÏÖÄ¿Ç°µÄpercent-support-lib²¢²»ÄÜÍêÈ«Âú×ãÎÒÃǵÄÐèÇó£¬ËùÒÔÎÒÃÇ¿¼ÂǶÔÆä½øÐÐÀ©Õ¹¡£Ëµ°×ÁË£¬ÎÒÃǾÍÏ£ÍûÔÚ²¼¾ÖµÄʱºò¿ÉÒÔ×Ô¼ºÉ趨²Î¿¼¿´¶È»¹ÊǸ߶ȣ¬±ÈÈçÉÏÊö2£¬ÎÒÃǶÔÓÚ¿í¸ß¿ÉÒÔд³É10%w£¬10%w¡£Ò²¾ÍÊÇÔÚ²»¸Ä±äÔ¿âµÄÓ÷¨µÄÇ°ÌáÏ£¬Ìí¼ÓһЩ¶îÍâµÄÖ§³Ö¡£
¶þ À©Õ¹µÄ¹¦ÄÜ
Ä¿Ç°ÎÒ³õ²½¶Ô¸Ã¿â½øÐÐÁ˸Äд£¬githubµØÖ·£ºandroid-percent-support-extend£¬¶ÔÓÚ¹Ù·½¿â£¬×öÁËÈçϵĸı䣺
-
²»¸Ä±äÔÓпâµÄÓ÷¨
-
Ìí¼ÓÁËPercentLinearLayout
-
Ö§³Ö°Ù·Ö±ÈÖ¸¶¨Ìض¨µÄ²Î¿¼Öµ£¬±ÈÈç¿í¶È»òÕ߸߶ȡ£
ÀýÈ磺app:layout_heightPercent="50%w", app:layout_marginPercent="15%w",
app:layout_marginBottomPercent="20%h". -
Ö§³Öͨ¹ýapp:layout_textSizePercentÉèÖÃtextViewµÄtextSize
-
¶ÔÓÚÍâ²ãÌ×ScrollViewµÄÎÊÌ⣬Ŀǰ¿ÉÒÔÔÚPercentLinearLayoutµÄÍâ²ãʹÓÃScrollView£¬²»¹ý¶ÔÓÚ¿í¶ÈµÄ°Ù·Ö±È²Î¿¼µÄ¾ÍÊÇandroid.R.id.contentµÄ¸ß¶È(ÒòΪ£¬ÎÞ·¨²Î¿¼¸¸¿Ø¼þµÄ¸ß¶È£¬¸¸¿Ø¼þµÄ¸ß¶ÈÀíÂÛÉÏÒÀÀµÓÚ×ÓView¸ß¶È£¬ÇÒģʽΪUNSPECIFIED)¡£
¶ÔÓÚÈçºÎµ¼È룬ҲÊÇÏ൱µÄ¼òµ¥£¬android studioµÄÓû§£¬Ö±½Ó£º
dependencies {
//...
compile 'com.zhy:percent-support-extends:1.0.1'
}
²»ÐèÒªµ¼Èë¹Ù·½µÄpercent-support-libÁË¡£
¶ÔÓÚµÄÈý¸öÀà·Ö±ðΪ£º
com.zhy.android.percent.support.PercentLinearLayout
com.zhy.android.percent.support.PercentRelativeLayout
com.zhy.android.percent.support.PercentFrameLayout
¶ÔÓÚeclipseµÄÓû§£ºgithubÉÏ×ÔÐÐÏÂÔØÔ´Â룬¾Í¼¸¸öÀàºÍÒ»¸öattrs.xml£¬Ò²¿ÉÒÔÔÚbintray.com/percent-support-extends ÏÂÔØÏà¹ØÎļþ¡£
ÏÂÃæ¿´¼¸¸ö¾ßÌåµÄʾÀý¡£
Èý ¾ßÌåµÄʾÀý
Demo 1
xml:
<?xml version="1.0" encoding="utf-8"?>
<com.zhy.android.percent.support.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.zhy.android.percent.support.PercentFrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:background="#ff44aacc"
app:layout_heightPercent="50%w"
app:layout_widthPercent="50%w">
<com.zhy.android.percent.support.PercentFrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:background="#ffcc5ec7"
app:layout_heightPercent="50%w"
app:layout_widthPercent="50%w">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#ff7ecc16"
android:gravity="center"
android:text="margin 15% of w"
app:layout_marginPercent="15%w"
/>
</com.zhy.android.percent.support.PercentFrameLayout>
</com.zhy.android.percent.support.PercentFrameLayout>
<TextView android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="bottom|right"
android:background="#44ff0000"
android:gravity="center"
android:text="15%w,15%w"
app:layout_heightPercent="15%w"
app:layout_marginPercent="5%w"
app:layout_widthPercent="15%w"/>
</com.zhy.android.percent.support.PercentFrameLayout>
Demo 2
xml:
<?xml version="1.0" encoding="utf-8"?>
<com.zhy.android.percent.support.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true">
<TextView
android:id="@+id/row_one_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#7700ff00"
android:text="w:70%,h:20%"
android:gravity="center"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%"/>
<TextView
android:id="@+id/row_one_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="@+id/row_one_item_one"
android:background="#396190"
android:text="w:30%,h:20%"
app:layout_heightPercent="20%"
android:gravity="center"
app:layout_widthPercent="30%"/>
<ImageView
android:id="@+id/row_two_item_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:src="@drawable/tangyan"
android:scaleType="centerCrop"
android:layout_below="@+id/row_one_item_one"
android:background="#d89695"
app:layout_heightPercent="70%"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="@id/row_two_item_one"
android:background="#770000ff"
android:gravity="center"
android:text="width:100%,height:10%"
app:layout_heightPercent="10%"
app:layout_widthPercent="100%"/>
</com.zhy.android.percent.support.PercentRelativeLayout>
ok£¬Àý×Ó¶¼±È½Ï¼òµ¥£¬Ö÷Òª¾ÍÒ»¸ö²¼¾ÖÎļþ£¬¿ÉÒÔ¿´³öÉÏÊöÎÒÃÇ¿ÉÒÔ¸ø¿í¶È¡¢¸ß¶È£¬±ß¾àµÈÖ¸¶¨²Î¿¼ÖµÎª¿í¶È»òÕ߸߶ȡ£ÕâÑùµÄ»°£¬ÔÚ±£Ö¤Í¼Æ¬¿í¡¢¸ß±ÈÀý¡¢¿Ø¼þÉèÖÃΪÕý·½ÐεÈÐèÇó¾ÍûÎÊÌâÁË¡£
½ÓÏÂÀ´»¹ÓиöÀý×Ó£¬¹¦ÄÜÖ÷ÒªÊÇÉèÖÃTextView¶ÔÓÚtextSizeµÄ°Ù·Ö±ÈÉèÖã»ÒÔ¼°¶ÔÓÚScrollViewµÄÖ§³Ö¡£µ±È»ÁË£¬¶ÔÓÚScrollViewµÄÖ§³Ö£¬Õâ¸öÀíÂÛÉÏÊDz»Ö§³ÖµÄ£¬ÒòΪ´ó¼Ò¶¼Çå³þ£¬Èç¹ûPercentLinearLayoutÔÚScrollViewÖУ¬ÄÇô¸ß¶ÈµÄģʽ¿Ï¶¨ÊÇUNSPECIFIED£¬ÄÇôÀíÂÛÉÏÀ´Ëµ¸ß¶ÈÊÇÎÞÏÞÖƵģ¬Ò²¾ÍÊÇÒÀÀµÓÚ×ÓViewµÄ¸ß¶È£¬¶ø°Ù·Ö±È²¼¾ÖµÄ¸ß¶ÈÊÇÒÀÀµÓÚ¸¸ViewµÄ¸ß¶ÈµÄ£¬ËùÓÐÊÇ»¥³âµÄ¡£¶øÎÒÃÇÖ§³ÖÊÇ£º¿¼Âǵ½±àд´úÂëµÄʱºò£¬´ó¶à²Î¿¼µÄÊÇÆÁÄ»¸ß¶È£¨android.R.id.content£©µÄ¸ß¶È£¬ËùÒÔÈç¹ûÔÚScrollViewÖУ¬±àд10%h£¬Õâ¸ö°Ù·Ö±ÈÊÇÒÀÀµÓÚÆÁÄ»¸ß¶ÈµÄ£¨²»°üÀ¨ActionBarµÄ¸ß¶È£©¡£
Demo 3
xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.zhy.android.percent.support.PercentLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff44aacc"
android:gravity="center"
android:text="width:60%,height:5%,ts:3%"
android:textColor="#ffffff"
app:layout_heightPercent="5%"
app:layout_marginBottomPercent="5%"
app:layout_textSizePercent="3%"
app:layout_widthPercent="60%"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff4400cc"
android:gravity="center"
android:text="width:70%,height:10%"
android:textColor="#ffffff"
app:layout_heightPercent="10%"
app:layout_marginBottomPercent="5%"
app:layout_widthPercent="70%"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff44aacc"
android:gravity="center"
android:text="w:80%,h:15%,textSize:5%"
android:textColor="#ffffff"
app:layout_heightPercent="15%"
app:layout_marginBottomPercent="5%"
app:layout_textSizePercent="5%"
app:layout_widthPercent="80%"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff4400cc"
android:gravity="center"
android:text="width:90%,height:5%"
android:textColor="#ffffff"
app:layout_heightPercent="20%"
app:layout_marginBottomPercent="5%"
app:layout_widthPercent="90%"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#ff44aacc"
android:gravity="center"
android:text="width:100%,height:25%"
android:textColor="#ffffff"
app:layout_heightPercent="25%"
app:layout_marginBottomPercent="5%"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#ff44aacc"
android:gravity="center"
android:text="width:100%,height:30%"
android:textColor="#ffffff"
app:layout_heightPercent="30%"
app:layout_marginBottomPercent="5%"
/>
</com.zhy.android.percent.support.PercentLinearLayout>
</ScrollView>
ÉÏÃæµÄµÚÈý¸öTextViewµÄ×ÖÌåÉèÖõľÍÊÇ5%£¨Ä¬Èϲο¼ÈÝÆ÷¸ß¶È£©¡£Õû¸öPercentLinearLayoutÔÚScrollViewÖС£ok~ ¹ÃÇÒÕâÑù£¬ÓÉÓÚÔ´Âë±È½Ï¼òµ¥£¬´ó¼Ò¿ÉÒÔ¸ù¾Ý×Ô¼ºµÄʵ¼ÊÐèÇóÈ¥Ð޸ģ¬Ç°Ìᾡ¿ÉÄܲ»Òª¸Ä±äÔÓеŦÄÜ¡£
ËÄ À©Õ¹µÄÏà¹ØÔ´Âë
(Ò») ¹ØÓÚattrs.xml
Ô¿âÖÐËùÓеÄÊôÐÔµÄformatΪfraction£¬µ«ÊÇÓÉÓÚÎÒÆÚÍûµÄд·¨ÓÐ10%w£¬10%h£¬10%£¬Ã»ÓÐÕÒµ½ºÏÊʵÄformat£¬¾ÍÖ±½Ó¶¨ÒåΪstringÁËstringÎÒ¿ÉÒÔ×Ô¼ºÈ¥½âÎö
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="PercentLayout_Layout">
<attr name="layout_widthPercent" format="string"/>
<attr name="layout_heightPercent" format="string"/>
<attr name="layout_marginPercent" format="string"/>
<attr name="layout_marginLeftPercent" format="string"/>
<attr name="layout_marginTopPercent" format="string"/>
<attr name="layout_marginRightPercent" format="string"/>
<attr name="layout_marginBottomPercent" format="string"/>
<attr name="layout_marginStartPercent" format="string"/>
<attr name="layout_marginEndPercent" format="string"/>
<attr name="layout_textSizePercent" format="string"/>
</declare-styleable>
</resources>
£¨¶þ£© »ñÈ¡×Ô¶¨ÒåÊôÐÔµÄÖµ¼°Ê¹ÓÃ
Èç¹û¿´ÁËÉÏƪ²©ÎĵĻ°£¬Ó¦¸ÃÇå³þ£¬¶ÔÓÚ×Ô¶¨ÒåÊôÐÔµÄÖµÊÇÔÚPercentLayoutHelper.getPercentLayoutInfo(c, attrs)ÖлñÈ¡µÄ¡£
¼òµ¥¿´ÏÂÐ޸ĺóµÄ´úÂ룺
public static PercentLayoutInfo getPercentLayoutInfo(Context context, AttributeSet attrs)
{
PercentLayoutInfo info = null;
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PercentLayout_Layout);
String sizeStr = array.getString(R.styleable.PercentLayout_Layout_layout_widthPercent);
PercentLayoutInfo.PercentVal percentVal = getPercentVal(sizeStr, true);
if (percentVal != null)
{
if (Log.isLoggable(TAG, Log.VERBOSE))
{
Log.v(TAG, "percent width: " + percentVal.percent);
}
info = info != null ? info : new PercentLayoutInfo();
info.widthPercent = percentVal;
}
//Ê¡ÂÔÁË»ñÈ¡ÆäËûµÄÀàËÆÊôÐÔ
array.recycle();
return info;
}
private static final String REGEX_PERCENT = "^((\[0-9\]+)(\[.\](\[0-9\]+))?|(\[.\](\[0-9\]+))?)%(\[wh\]?)$";
/**
* widthStr to PercentVal
* <br/>
* eg: 35%w => new PercentVal(35, true)
*
* @param percentStr
* @param isOnWidth
* @return
*/
private static PercentLayoutInfo.PercentVal getPercentVal(String percentStr, boolean isOnWidth)
{
//valid param
if (percentStr == null)
{
return null;
}
Pattern p = Pattern.compile(REGEX_PERCENT);
Matcher matcher = p.matcher(percentStr);
if (!matcher.matches())
{
throw new RuntimeException("the value of layout_xxxPercent invalid! ==>" + percentStr);
}
int len = percentStr.length();
//extract the float value
String floatVal = matcher.group(1);
String lastAlpha = percentStr.substring(len - 1);
float percent = Float.parseFloat(floatVal) / 100f;
boolean isBasedWidth = (isOnWidth && !lastAlpha.equals("h")) || lastAlpha.equals("w");
return new PercentLayoutInfo.PercentVal(percent, isBasedWidth);
}
Ê×ÏÈÎÒÃÇ»ñÈ¡×Ô¶¨ÒåÊôÐÔµÄÌîдµÄÖµ£¬Í¨¹ýgetPercentVal·½·¨£¬Ôڸ÷½·¨ÄÚ²¿Í¨¹ýÕýÔòУÑéÆäºÏ·¨ÐÔ£¬Èç¹ûºÏ·¨£¬Ôò½«Æä²ð½â·â×°³ÉPercentVal¶ÔÏ󣬸öÔÏóÖмǼ°Ù·Ö±ÈÖµ£¬ÒѾ֪·ñ²Î¿¼¿í¶ÈµÄ²¼¶ûÖµ£¨Èç¹û²Î¿¼¿í¶ÈÔòΪtrue£¬·ñÔòΪfalse£©¡£¶ÔÓÚûÓкó׺w|hµÄ£¬ºÍÔ¿âµÄ½âÎö·½Ê½Ïàͬ¡£
PercentVal¶ÔÏóÈçÏÂ:
public static class PercentVal
{
public float percent = -1;
public boolean isBaseWidth;
public PercentVal(float percent, boolean isBaseWidth)
{
this.percent = percent;
this.isBaseWidth = isBaseWidth;
}
}
¶ÔÓÚ¶¨ÒåµÄ×Ô¶¨ÒåÊôÐÔ»ñÈ¡Íê³ÉÖ®ºó£¬Ê£ÏµÄÎÞ·ÇÊDzâÁ¿Ê±ºò¶ÔÓÚÔ±¾µÄLayoutParamsÖеĿí¶ÈºÍ¸ß¶ÈµÄ¸³Öµ×ö¼òµ¥µÄÐ޸ġ£²Î¿¼ÉÏһƪµÄÔ´Â룬ÎÒÃÇÖ±½Ó¿´PercentLayoutInfo.fillLayoutParams(params, widthHint, heightHint);·½·¨£º
public void fillLayoutParams(ViewGroup.LayoutParams params, int widthHint, int heightHint)
{ // Preserve the original layout params, so we can restore them after the measure step.
mPreservedParams.width = params.width;
mPreservedParams.height = params.height; /*
if (widthPercent >= 0) {
params.width = (int) (widthHint * widthPercent);
}
if (heightPercent >= 0) {
params.height = (int) (heightHint * heightPercent);
}*/
if (widthPercent != null)
{ int base = widthPercent.isBaseWidth ? widthHint : heightHint;
params.width = (int) (base * widthPercent.percent);
} if (heightPercent != null)
{ int base = heightPercent.isBaseWidth ? widthHint : heightHint;
params.height = (int) (base * heightPercent.percent);
} if (Log.isLoggable(TAG, Log.DEBUG))
{
Log.d(TAG, "after fillLayoutParams: (" + params.width + ", " + params.height + ")");
}
}
Ô±¾µÄÔ´Âë±È½Ï¼òµ¥£¬Ö»ÐèÒª½«widthHint/heightHint³ËÒ԰ٷֱȼ´¿É£¨¼ûÉÏ´úÂë×¢ÊÍ£©£¬¶øÎÒÃÇÐ޸ĵÄÒ²±È½ÏÈÝÒ×£¬Ê×ÏÈÅжϲο¼¿í¶È»¹ÊǸ߶ȣ¬È»ºó³ËÒ԰ٷֱȣ¨¸ù¾ÝÎÒÃǵĶÔÏóPercentValµÄÊôÐÔ£©¡£
ok£¬´ó¸ÅµÄÔ´ÂëÐ޸ľÍÊÇÉÏÊöµÄÄÚÈÝ£¬ÓÐÐËȤµÄ¿ÉÒÔÖ±½Ó²é¿´Ô´Âë¡£
µ±È»ÁË£¬ÉÏÊö¿âÖп϶¨»¹´æÔÚ»ò¶à»òÉÙµÄÎÊÌ⣬´ó¼Ò¿ÉÒÔforkÍêÉÆÏ£¬»òÕßÖ±½ÓÁôÑÔÌáÒâ¼û¶¼¿ÉÒÔ¡£
githubµØÖ·£ºandroid-percent-support-extend £¬Ó÷¨²Î¿¼ÉÏÎÄ£¬»òÕßREADME¡£»¶Óstar and fork ¡£
~~have a nice day ~~
ok~
