微信小程序实现动态改变view标签宽度和高度的方法_javascript技巧_脚本之家

本文实例呈报了Wechat小程序完毕动态退换view标签宽度和冲天的办法。分享给大家供大家仿效,具体如下:

上篇首倘诺简轻便单的牵线下自定义viewGroup的用项以至艺术,那篇写个小例子试试水,先几张效果图

1、效果体现

效仿Wechat交际圈展现图片,能够见见,依据图片数量的不如,突显的章程也分化,下边来看看完成的思绪

2、关键代码


index.wxml文件

思路

金沙网址,1,度量viewGroup,依照子view的数量来支配viewGroup的宽高
(一):若是实view的多少少于大概等于3的时候,就体现一行,宽正是子view宽的总的数量,高则是子view的高
(二):借使实view大于3何况小于等于6,分三种情况,一种是子view数量是4,就算是4,那么宽则是子view宽的2倍,高是子view高的2倍,假若不是4,那么就显得两行,一行是3,一行是2要么3,那么宽则是取最大,也正是子view宽的3倍,高是子view的2倍
(三):假如实view大于6了,那么宽就是子view的3倍,高是子view的3倍
微信小程序实现动态改变view标签宽度和高度的方法_javascript技巧_脚本之家。2,衡量实现未来,就到了子view的安置了
(一):假如实view数量少于或然等于3,则摆放一行,从左到右
(二):借使实view大于3况且小于等于6,假如是4,则两行,上下各2个,不然就率先行3个,第二行2个恐怕3个
(三):假如实view数量大于6,则3行,前2行3个,最后一行1个,2个或然3个

先看看代码:


我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px

onMeasure:

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //总宽度和高度
        int totalWidth = 0;
        int totalHeight = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            // 得到child的lp
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            // 当前子空间实际占据的宽度
            int childWidth = child.getMeasuredWidth() + lp.leftMargin
                    + lp.rightMargin;
            // 当前子空间实际占据的高度
            int childHeight = child.getMeasuredHeight() + lp.topMargin
                    + lp.bottomMargin;
            if (getChildCount() <= 3) {
                totalWidth += childWidth;
                totalHeight = childHeight;
            } else if (getChildCount() <= 6) {
                if (getChildCount() == 4) {
                    totalWidth = childWidth * 2;
                    totalHeight = childHeight * 2;
                } else {
                    totalWidth = childWidth * 3;
                    totalHeight = childHeight * 2;
                }
            } else if (getChildCount() <= 9) {
                totalWidth = childWidth * 3;
                totalHeight = childHeight * 3;
            }
        }
        setMeasuredDimension(totalWidth + getPaddingLeft() + getPaddingRight(),
                totalHeight + getPaddingTop() + getPaddingBottom());
    }

简单掌握,首先我们定义出四个变量,分别记录总幅度和可观,然后,大家遍历取得持有子view的宽高,依照思路来进展衡量,度量完成今后,在来拜见怎么样摆放子view


那边安装的style="width:{{view.Width}}px;height:{{view.Height}}px;"可因那一件事件响应动态改换数值,进而改换view组件的宽高样式。

onLayout

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //onLayout会被调用多次,为了预防重叠
        mAllViews.clear();
        mLineHeight.clear();

        //获取总宽度
        int width = getWidth();

        //单行宽度和当行高度
        int lineWidth = 0;
        int lineHeight = 0;
        // 存储每一行所有的childView
        List<View> childViews = new ArrayList<>();
        int childCount = getChildCount();
        // 遍历所有的子view
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();

            // 如果已经需要换行
            if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) {
                // 记录这一行所有的View以及最大高度
                mLineHeight.add(lineHeight);
                // 将当前行的childView保存,然后开启新的ArrayList保存下一行的childView
                mAllViews.add(childViews);
                lineWidth = 0;// 重置行宽
                childViews = new ArrayList<>();
            }

            //  如果不需要换行,则累加
            lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
            lineHeight = Math.max(lineHeight, childHeight + lp.topMargin
                    + lp.bottomMargin);
            childViews.add(child);
        }
        // 记录最后一行
        mLineHeight.add(lineHeight);
        mAllViews.add(childViews);

        int left = getPaddingLeft();
        int top = getPaddingTop();
        // 得到总行数
        int lineNum = mAllViews.size();
        for (int i = 0; i < lineNum; i++) {
            // 每一行的所有的views
            childViews = mAllViews.get(i);
            // 当前行的最大高度
            lineHeight = mLineHeight.get(i);

            // 遍历当前行所有的子View
            for (int j = 0; j < childViews.size(); j++) {
                View child = childViews.get(j);
                if (child.getVisibility() != View.GONE) {
                    MarginLayoutParams lp = (MarginLayoutParams) child
                            .getLayoutParams();

                    //计算childView的left,top,right,bottom
                    int childLeft = left + lp.leftMargin;
                    int childTop = top + lp.topMargin;
                    int childRight = childLeft + child.getMeasuredWidth();
                    int childBottom = childTop + child.getMeasuredHeight();

                    child.layout(childLeft, childTop, childRight, childBottom);

                    left += child.getMeasuredWidth() + lp.rightMargin
                            + lp.leftMargin;
                }
            }
            //换行后,重新从第一个开始,高度累加
            left = getPaddingTop();
            top += lineHeight;
        }

    }

大家定义八个list来囤积全部的子view和每一行的万丈,然后,大家世襲遍历子view,假诺当行全部子view的宽累积大于了构造的宽窄,大家就换行,不然就三翻五次累积,最后把装有的行数和子view加多到大家的list中,最终经过遍历list来将子view拿出来,鲜明left,top,right,bottom之后,就足以拓展示公布局了,这里要在乎的是,借使供给换行了,那么子view的地点是从第四个起来,所以大家供给将left重新载入参数,並且高度扩展,现在看看怎么用,分三种用法,一种正是静态布局,一种是动态构造,大家在开荒中,日常都以利用动态布局格局


var pageData={}pageData.data={ view:{ Width:100, Height:100 }}pageData['viewWidth']=function; this.setData({ view:{ Width:e.detail.value, Height:this.data.view.Height } })}pageData['viewHeight']=function{ this.setData({ view:{ Width:this.data.view.Width, Height:e.detail.value } })}Page

静态用法

静态用法正是写在xml之中,view的数额手动去丰裕

<com.example.administrator.myactivity.MyView
        android:id="@+id/myView"
        android:layout_width="wrap_content"
        android:background="@color/colorAccent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
    </com.example.administrator.myactivity.MyView>

那也是自家效力图的用法


PS:相通前边小说//www.jb51.net/article/129725.htm介绍过的,可在事件管理函数中增加console.log;,在调整台中就能够观看见是由e.detail.value获得宽与高改动数值。

动态用法

动态用准绳是依附服务器再次回到的数据来增添子view,这里本身模拟一下
第一咱们定义二个item结构,里面就五个ImageView

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:src="@mipmap/ic_launcher">

</ImageView>

然后大家在activity中,动态的充足数据

public class MainActivity extends AppCompatActivity {
    MyView myView;
    private int[] images = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myView = (MyView) findViewById(R.id.myView);
        setData();
    }

    private void setData() {
        LayoutInflater inflater = LayoutInflater.from(this);
        for (int i = 0; i < images.length; i++) {
            ImageView imageView = (ImageView) inflater.inflate(R.layout.item, myView, false);
            imageView.setImageResource(images[i]);
            myView.addView(imageView);
        }
    }
}

这样就完事了动态增进数据,好了,到此处就成功了模拟Wechat生活圈展现图片效果,最终附上整个自定义viewGroup的代码:

package com.example.administrator.myactivity;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;


import java.util.ArrayList;
import java.util.List;


/**
 * Created by Pan_ on 2015/2/2.
 */
public class MyView extends ViewGroup {


    /**
     * 存储所有的View,按行记录
     */
    private List<List<View>> mAllViews = new ArrayList<>();
    /**
     * 记录每一行的最大高度
     */
    private List<Integer> mLineHeight = new ArrayList<>();

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //总宽度和高度
        int totalWidth = 0;
        int totalHeight = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            // 得到child的lp
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            // 当前子空间实际占据的宽度
            int childWidth = child.getMeasuredWidth() + lp.leftMargin
                    + lp.rightMargin;
            // 当前子空间实际占据的高度
            int childHeight = child.getMeasuredHeight() + lp.topMargin
                    + lp.bottomMargin;
            if (getChildCount() <= 3) {
                totalWidth += childWidth;
                totalHeight = childHeight;
            } else if (getChildCount() <= 6) {
                if (getChildCount() == 4) {
                    totalWidth = childWidth * 2;
                    totalHeight = childHeight * 2;
                } else {
                    totalWidth = childWidth * 3;
                    totalHeight = childHeight * 2;
                }
            } else if (getChildCount() <= 9) {
                totalWidth = childWidth * 3;
                totalHeight = childHeight * 3;
            }
        }
        setMeasuredDimension(totalWidth + getPaddingLeft() + getPaddingRight(),
                totalHeight + getPaddingTop() + getPaddingBottom());
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //onLayout会被调用多次,为了预防重叠
        mAllViews.clear();
        mLineHeight.clear();

        //获取总宽度
        int width = getWidth();

        //单行宽度和当行高度
        int lineWidth = 0;
        int lineHeight = 0;
        // 存储每一行所有的childView
        List<View> childViews = new ArrayList<>();
        int childCount = getChildCount();
        // 遍历所有的子view
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            int childWidth = child.getMeasuredWidth();
            int childHeight = child.getMeasuredHeight();

            // 如果已经需要换行
            if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) {
                // 记录这一行所有的View以及最大高度
                mLineHeight.add(lineHeight);
                // 将当前行的childView保存,然后开启新的ArrayList保存下一行的childView
                mAllViews.add(childViews);
                lineWidth = 0;// 重置行宽
                childViews = new ArrayList<>();
            }

            //  如果不需要换行,则累加
            lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
            lineHeight = Math.max(lineHeight, childHeight + lp.topMargin
                    + lp.bottomMargin);
            childViews.add(child);
        }
        // 记录最后一行
        mLineHeight.add(lineHeight);
        mAllViews.add(childViews);

        int left = getPaddingLeft();
        int top = getPaddingTop();
        // 得到总行数
        int lineNum = mAllViews.size();
        for (int i = 0; i < lineNum; i++) {
            // 每一行的所有的views
            childViews = mAllViews.get(i);
            // 当前行的最大高度
            lineHeight = mLineHeight.get(i);

            // 遍历当前行所有的子View
            for (int j = 0; j < childViews.size(); j++) {
                View child = childViews.get(j);
                if (child.getVisibility() != View.GONE) {
                    MarginLayoutParams lp = (MarginLayoutParams) child
                            .getLayoutParams();

                    //计算childView的left,top,right,bottom
                    int childLeft = left + lp.leftMargin;
                    int childTop = top + lp.topMargin;
                    int childRight = childLeft + child.getMeasuredWidth();
                    int childBottom = childTop + child.getMeasuredHeight();

                    child.layout(childLeft, childTop, childRight, childBottom);

                    left += child.getMeasuredWidth() + lp.rightMargin
                            + lp.leftMargin;
                }
            }
            //换行后,重新从第一个开始,高度累加
            left = getPaddingTop();
            top += lineHeight;
        }

    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }
}

此间补充有个别,为啥大家供给设置LayoutParams
呢,因为我们每叁个layout对应贰个LayoutParams
,举例LinereanLayout对应的便是LinereanLayout的LayoutParams
,RelativeLayout对应的是RelativeLayout的LayoutParams,所以,大家在写LayoutParams
的时候,会发觉有那么些layout的LayoutParams
,那怎么知道自家索要哪三个吧?这个时候就看您的父view是哪些构造,就对应哪个LayoutParams
,大家在自定义viewGroup的时候,因为思索到子view有Margin的脾气,所以,我们设置他对应的LayoutParams
即是MarginLayoutParams,好了,这篇文章到此处就得了了,快到新岁了,最终祝我们新春欢娱~~

3、源代码点击这里本站下载

期望本文所述对我们Wechat小程序开垦具备助于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注