欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现Z轴布局效果

程序员文章站 2022-03-21 22:26:29
如果需要在布局中创造一个层叠的概念,那么使用android系统中的viewgroup是不够的,但是可以通过改变viewgroup的绘制顺序实现代码下载继承自framelayoutframelayout...

如果需要在布局中创造一个层叠的概念,那么使用android系统中的viewgroup是不够的,但是可以通过改变viewgroup的绘制顺序实现

Android实现Z轴布局效果

代码下载

继承自framelayout

framelayout已经帮我们实现了子view的measure和layout过程,我们只需在它的基础上改变绘制顺序即可

自定义layoutparams

layoutparams的作用是向父布局请求布局参数(measurespec),这个参数会在view inflate时添加到布局中,我们如果使用layoutparams将会得到很大的方便

// 这里继承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();
 }
}

我们自定义个attribute,那么就可以在xml中进行使用了

<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"/>

同时需要重写viewgroup的generatelayoutparams(),让它生成我们的layoutparams

初始化绘制顺序

在所有的子view加载完成后初始化需要绘制的顺序(根据我们的zorderlayoutparams)

@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);
 }

 // 根据zorder属性,进行排序
 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,然后根据他们的zorder进行排序,onfinishinflate()会在装载完所有的子view后进行回调

改变view的绘制顺序

这里使用排好序的view绘制顺序就可以了, 记得调用setchildrendrawingorderenabled(true);

@override
protected 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>

可以看出这个布局是中间的zorder最高,表示中间的会压在两边的上边,而最左(右)的绘制层级(zorder)为1, 表示会绘制在最下面

Android实现Z轴布局效果

完整代码

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时,会解析每个跟布局的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();
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: Android 布局