Android實(shí)現(xiàn)Z軸布局效果
如果需要在布局中創(chuàng)造一個(gè)層疊的概念,那么使用Android系統(tǒng)中的ViewGroup是不夠的,但是可以通過(guò)改變ViewGroup的繪制順序?qū)崿F(xiàn)
代碼下載
繼承自FrameLayout
FrameLayout已經(jīng)幫我們實(shí)現(xiàn)了子View的measure和layout過(guò)程,我們只需在它的基礎(chǔ)上改變繪制順序即可
自定義LayoutParams
layoutParams的作用是向父布局請(qǐng)求布局參數(shù)(MeasureSpec),這個(gè)參數(shù)會(huì)在View inflate時(shí)添加到布局中,我們?nèi)绻褂肔ayoutParams將會(huì)得到很大的方便
// 這里繼承FrameLayout的LayoutParams即可public static class LayoutParams extends FrameLayout.LayoutParams { public final static int DEFAULT_ZORDER = 1; public int zOrder; public LayoutParams(@NonNull Context c, @Nullable AttributeSet attrs) { super(c, attrs); TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.ZOrderLayout); zOrder = a.getInt(R.styleable.ZOrderLayout_layout_zorder, DEFAULT_ZORDER); a.recycle(); }}
我們自定義個(gè)Attribute,那么就可以在XML中進(jìn)行使用了
<declare-styleable name='ZOrderLayout'> <attr name='layout_zorder' format='integer'/></declare-styleable>
這樣我們的View就可以這么使用
<!--layout_zorder 表示該View在第1層--><tianrui.viewgroup.MyTextView android:text='0' android:layout_width='50dp' android:layout_height='50dp' android:background='@android:color/holo_red_light' app:layout_zorder='1'/><!--layout_zorder=2 表示該View在第2層--><tianrui.viewgroup.MyTextView android:text='1' android:layout_width='50dp' android:layout_height='50dp' android:layout_marginLeft='20dp' android:background='@android:color/holo_blue_light' app:layout_zorder='2'/>
同時(shí)需要重寫(xiě)ViewGroup的generateLayoutParams(),讓它生成我們的LayoutParams
初始化繪制順序
在所有的子View加載完成后初始化需要繪制的順序(根據(jù)我們的ZorderLayoutParams)
@Overrideprotected void onFinishInflate() { super.onFinishInflate(); initialZOrder();}private void initialZOrder() { final int childCount = getChildCount(); View view; ZOrderLayout.LayoutParams params; for (int i = 0; i < childCount; i++) { view = getChildAt(i); params = (LayoutParams) view.getLayoutParams(); Pair<View, Integer> pair = new Pair<>(view, params.zOrder); list.add(pair); } // 根據(jù)Zorder屬性,進(jìn)行排序 Collections.sort(list, new Comparator<Pair<View, Integer>>() { @Override public int compare(Pair<View, Integer> o1, Pair<View, Integer> o2) { return o1.second - o2.second; } });}
獲取所有的子View,然后根據(jù)他們的ZOrder進(jìn)行排序,onFinishInflate()會(huì)在裝載完所有的子View后進(jìn)行回調(diào)
改變View的繪制順序
這里使用排好序的View繪制順序就可以了, 記得調(diào)用setChildrenDrawingOrderEnabled(true);
@Overrideprotected int getChildDrawingOrder(int childCount, int i) { return indexOfChild(list.get(i).first);}
Demo演示
<?xml version='1.0' encoding='utf-8'?><tianrui.viewgroup.view.ZOrderLayout 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'> <tianrui.viewgroup.MyTextView android:text='0' android:layout_width='50dp' android:layout_height='50dp' android:background='@android:color/holo_red_light' app:layout_zorder='1'/> <tianrui.viewgroup.MyTextView android:text='1' android:layout_width='50dp' android:layout_height='50dp' android:layout_marginLeft='20dp' android:background='@android:color/holo_blue_light' app:layout_zorder='2'/> <tianrui.viewgroup.MyTextView android:text='2' android:layout_width='50dp' android:layout_height='50dp' android:layout_marginLeft='40dp' android:background='@android:color/holo_orange_light' app:layout_zorder='3'/> <tianrui.viewgroup.MyTextView android:text='3' android:layout_width='50dp' android:layout_height='50dp' android:layout_marginLeft='60dp' android:background='@android:color/holo_green_light' app:layout_zorder='2'/> <tianrui.viewgroup.MyTextView android:text='4' android:layout_width='50dp' android:layout_height='50dp' android:layout_marginLeft='80dp' android:background='@android:color/holo_purple' app:layout_zorder='1'/></tianrui.viewgroup.view.ZOrderLayout>
可以看出這個(gè)布局是中間的zorder最高,表示中間的會(huì)壓在兩邊的上邊,而最左(右)的繪制層級(jí)(zorder)為1, 表示會(huì)繪制在最下面
完整代碼
public class ZOrderLayout extends FrameLayout { private List<Pair<View, Integer>> list = new ArrayList<>(); public ZOrderLayout(@NonNull Context context) { this(context, null); } public ZOrderLayout(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public ZOrderLayout(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) { super(context, attrs, defStyleAttr); setChildrenDrawingOrderEnabled(true); } @Override protected int getChildDrawingOrder(int childCount, int i) { return indexOfChild(list.get(i).first); } @Override protected void onFinishInflate() { super.onFinishInflate(); initialZOrder(); } private void initialZOrder() { final int childCount = getChildCount(); View view; ZOrderLayout.LayoutParams params; for (int i = 0; i < childCount; i++) { view = getChildAt(i); params = (LayoutParams) view.getLayoutParams(); Pair<View, Integer> pair = new Pair<>(view, params.zOrder); list.add(pair); } Collections.sort(list, new Comparator<Pair<View, Integer>>() { @Override public int compare(Pair<View, Integer> o1, Pair<View, Integer> o2) { return o1.second - o2.second; } }); } /** * 在解析xml時(shí),會(huì)解析每個(gè)跟布局的LayoutParams */ @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new LayoutParams(getContext(), attrs); } public static class LayoutParams extends FrameLayout.LayoutParams { public final static int DEFAULT_ZORDER = 1; public int zOrder; public LayoutParams(@NonNull Context c, @Nullable AttributeSet attrs) { super(c, attrs); TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.ZOrderLayout); zOrder = a.getInt(R.styleable.ZOrderLayout_layout_zorder, DEFAULT_ZORDER); a.recycle(); } }}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 使用Docker的NFS-Ganesha鏡像搭建nfs服務(wù)器的詳細(xì)過(guò)程2. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)3. 刪除docker里建立容器的操作方法4. Docker 部署 Prometheus的安裝詳細(xì)教程5. IntelliJ IDEA恢復(fù)刪除文件的方法6. IntelliJ IDEA導(dǎo)入jar包的方法7. VMware中如何安裝Ubuntu8. docker /var/lib/docker/aufs/mnt 目錄清理方法9. 使用 kind 和 Docker 啟動(dòng)本地的 Kubernetes環(huán)境10. IntelliJ IDEA配置Tomcat服務(wù)器的方法
