当前位置: 移动技术网 > 移动技术>移动开发>Android > Android实现Z轴布局效果

Android实现Z轴布局效果

2020年08月27日  | 移动技术网移动技术  | 我要评论
如果需要在布局中创造一个层叠的概念,那么使用android系统中的viewgroup是不够的,但是可以通过改变viewgroup的绘制顺序实现代码下载继承自framelayoutframelayout

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

代码下载

继承自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, 表示会绘制在最下面

完整代码

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

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

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网