Android自定义View的用法总结

本文参考了：http://greenrobot.me/devpost/android-custom-layout/

Android SDK中提供了很多UI组件，如RelativeLayout， LinearLayout等，使用自定义控件有两大优点：

1、通过减少View的使用来增加UI的显示效率

2、构建SDK中没有的控件

原文总结了4种自定义View，分别是Composite View, Custom Composite View, Flat Custom View和Async Custom Views。示例代码在https://github.com/lucasr/android-layout-samples，可以直接运行。该工程依赖两个工程：Picasso 和Smoothie.Picasso

Picasso是一个异步图片加载库，Smoothie提供了异步加载ListView和GridView数据项的接口，使列表数据的加载更加顺滑。

本文只介绍Composite Vew 和 Custom Composite View的方法，这两种方式足够我们使用了，剩余两种方法需要自定义一套控制视图的框架，维护代价高，建议只用在app的核心且稳定的UI中，感兴趣的读者可自行研究。

Composite View

此方法是将多个View结合成一个可重用View的最简单方法，过程如下：

1、自定义控件，继承相应的控件。

2、在构造函数中填充一个merge布局

3、初始化自定义控件中的内部View

4、提供刷新View的接口

下面介绍了一个用法，该View的布局如下图所示：

首先是定义一个类文件TweetCompositeView.java

public class TweetCompositeView extends RelativeLayout implements TweetPresenter {
    private final ImageView mProfileImage;
    private final TextView mAuthorText;
    private final TextView mMessageText;
    private final ImageView mPostImage;
    private final EnumMap<Action, ImageView> mActionIcons;

    public TweetCompositeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TweetCompositeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        LayoutInflater.from(context).inflate(R.layout.tweet_composite_view, this, true);
        //初始化内部成员变量
        mProfileImage = (ImageView) findViewById(R.id.profile_image);
        mAuthorText = (TextView) findViewById(R.id.author_text);
        mMessageText = (TextView) findViewById(R.id.message_text);
        mPostImage = (ImageView) findViewById(R.id.post_image);

        mActionIcons = new EnumMap(Action.class);
        for (Action action : Action.values()) {
            final ImageView icon;
            switch (action) {
                case REPLY:
                    icon = (ImageView) findViewById(R.id.reply_action);
                    break;

                case RETWEET:
                    icon = (ImageView) findViewById(R.id.retweet_action);
                    break;

                case FAVOURITE:
                    icon = (ImageView) findViewById(R.id.favourite_action);
                    break;

                default:
                    throw new IllegalArgumentException("Unrecognized tweet action");
            }

            mActionIcons.put(action, icon);
        }
    }

    @Override
    public boolean shouldDelayChildPressedState() {
        return false;
    }

    //提供更新UI的接口
    @Override
    public void update(Tweet tweet, EnumSet<UpdateFlags> flags) {
        mAuthorText.setText(tweet.getAuthorName());
        mMessageText.setText(tweet.getMessage());

        final Context context = getContext();
        ImageUtils.loadImage(context, mProfileImage, tweet.getProfileImageUrl(), flags);

        final boolean hasPostImage = !TextUtils.isEmpty(tweet.getPostImageUrl());
        mPostImage.setVisibility(hasPostImage ? View.VISIBLE : View.GONE);
        if (hasPostImage) {
            ImageUtils.loadImage(context, mPostImage, tweet.getPostImageUrl(), flags);
        }
    }
}

该类继承自RelativeLayout，实现了TweetPresenter的接口以更新UI。构造函数中初始化内部的View

布局文件tweet_composite_view.xml中的merge tag减少了布局的层次

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/profile_image"
        android:layout_width="@dimen/tweet_profile_image_size"
        android:layout_height="@dimen/tweet_profile_image_size"
        android:layout_marginRight="@dimen/tweet_content_margin"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/author_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/profile_image"
        android:layout_alignTop="@id/profile_image"
        android:textColor="@color/tweet_author_text_color"
        android:textSize="@dimen/tweet_author_text_size"
        android:singleLine="true"/>

    <TextView
        android:id="@+id/message_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/author_text"
        android:layout_alignLeft="@id/author_text"
        android:textColor="@color/tweet_message_text_color"
        android:textSize="@dimen/tweet_message_text_size"/>

    <ImageView
        android:id="@+id/post_image"
        android:layout_width="fill_parent"
        android:layout_height="@dimen/tweet_post_image_height"
        android:layout_below="@id/message_text"
        android:layout_alignLeft="@id/message_text"
        android:layout_marginTop="@dimen/tweet_content_margin"
        android:scaleType="centerCrop"/>

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/post_image"
        android:layout_alignLeft="@id/message_text"
        android:layout_marginTop="@dimen/tweet_content_margin"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/reply_action"
            android:layout_width="0dp"
            android:layout_height="@dimen/tweet_icon_image_size"
            android:layout_weight="1"
            android:src="@drawable/tweet_reply"
            android:scaleType="fitStart"/>

        <ImageView
            android:id="@+id/retweet_action"
            android:layout_width="0dp"
            android:layout_height="@dimen/tweet_icon_image_size"
            android:layout_weight="1"
            android:src="@drawable/tweet_retweet"
            android:scaleType="fitStart"/>

        <ImageView
            android:id="@+id/favourite_action"
            android:layout_width="0dp"
            android:layout_height="@dimen/tweet_icon_image_size"
            android:layout_weight="1"
            android:src="@drawable/tweet_favourite"
            android:scaleType="fitStart"/>

    </LinearLayout>

</merge>

这种方法自定义的View用法简单，维护也方便。但这种方式自定义的View的UI子View较多，对于复杂的View，将影响遍历效率。打开手机设置中的显示布局边界选项，效果图如下所示：

Android某些控件如RelativeLayout，LinearLayout等容器控件，需要多次遍历子View来确定自身的属性，如LinearLayout的weight属性。如果能针对自己的App自定义子View的计算和定位逻辑，则可以极大的优化UI的遍历。这种做法便是接下来介绍的Custom Composite View

Custom Composite View

相比Composite View的方法，一个Custom Composite View继承自一个ViewGroup，并实现了onMeasure和onLayout方法。下面的TweetLayoutView便是一个Custom Composite View.

TweetLayoutView.java

public class TweetLayoutView extends ViewGroup implements TweetPresenter {
    private final ImageView mProfileImage;
    private final TextView mAuthorText;
    private final TextView mMessageText;
    private final ImageView mPostImage;
    private final EnumMap<Action, View> mActionIcons;

    public TweetLayoutView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TweetLayoutView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        LayoutInflater.from(context).inflate(R.layout.tweet_layout_view, this, true);
        mProfileImage = (ImageView) findViewById(R.id.profile_image);
        mAuthorText = (TextView) findViewById(R.id.author_text);
        mMessageText = (TextView) findViewById(R.id.message_text);
        mPostImage = (ImageView) findViewById(R.id.post_image);

        mActionIcons = new EnumMap(Action.class);
        for (Action action : Action.values()) {
            final int viewId;
            switch (action) {
                case REPLY:
                    viewId = R.id.reply_action;
                    break;

                case RETWEET:
                    viewId = R.id.retweet_action;
                    break;

                case FAVOURITE:
                    viewId = R.id.favourite_action;
                    break;

                default:
                    throw new IllegalArgumentException("Unrecognized tweet action");
            }

            mActionIcons.put(action, findViewById(viewId));
        }
    }

    private void layoutView(View view, int left, int top, int width, int height) {
        MarginLayoutParams margins = (MarginLayoutParams) view.getLayoutParams();
        final int leftWithMargins = left + margins.leftMargin;
        final int topWithMargins = top + margins.topMargin;

        view.layout(leftWithMargins, topWithMargins,
                    leftWithMargins + width, topWithMargins + height);
    }

    private int getWidthWithMargins(View child) {
        final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        return child.getWidth() + lp.leftMargin + lp.rightMargin;
    }

    private int getHeightWithMargins(View child) {
        final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        return child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
    }

    private int getMeasuredWidthWithMargins(View child) {
        final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        return child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
    }

    private int getMeasuredHeightWithMargins(View child) {
        final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        return child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
    }

    @Override
    public boolean shouldDelayChildPressedState() {
        return false;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int widthUsed = 0;
        int heightUsed = 0;

        measureChildWithMargins(mProfileImage,
                                widthMeasureSpec, widthUsed,
                                heightMeasureSpec, heightUsed);
        widthUsed += getMeasuredWidthWithMargins(mProfileImage);

        measureChildWithMargins(mAuthorText,
                                widthMeasureSpec, widthUsed,
                                heightMeasureSpec, heightUsed);
        heightUsed += getMeasuredHeightWithMargins(mAuthorText);

        measureChildWithMargins(mMessageText,
                                widthMeasureSpec, widthUsed,
                                heightMeasureSpec, heightUsed);
        heightUsed += getMeasuredHeightWithMargins(mMessageText);

        if (mPostImage.getVisibility() != View.GONE) {
            measureChildWithMargins(mPostImage,
                                    widthMeasureSpec, widthUsed,
                                    heightMeasureSpec, heightUsed);
            heightUsed += getMeasuredHeightWithMargins(mPostImage);
        }

        int maxIconHeight = 0;
        for (Action action : Action.values()) {
            final View iconView = mActionIcons.get(action);
            measureChildWithMargins(iconView,
                                    widthMeasureSpec, widthUsed,
                                    heightMeasureSpec, heightUsed);

            final int height = getMeasuredHeightWithMargins(iconView);
            if (height > maxIconHeight) {
                maxIconHeight = height;
            }

            widthUsed += getMeasuredWidthWithMargins(iconView);
        }
        heightUsed += maxIconHeight;

        int heightSize = heightUsed + getPaddingTop() + getPaddingBottom();
        setMeasuredDimension(widthSize, heightSize);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int paddingLeft = getPaddingLeft();
        final int paddingTop = getPaddingTop();

        int currentTop = paddingTop;

        layoutView(mProfileImage, paddingLeft, currentTop,
                   mProfileImage.getMeasuredWidth(),
                   mProfileImage.getMeasuredHeight());

        final int contentLeft = getWidthWithMargins(mProfileImage) + paddingLeft;
        final int contentWidth = r - l - contentLeft - getPaddingRight();

        layoutView(mAuthorText, contentLeft, currentTop,
                   contentWidth, mAuthorText.getMeasuredHeight());
        currentTop += getHeightWithMargins(mAuthorText);

        layoutView(mMessageText, contentLeft, currentTop,
                contentWidth, mMessageText.getMeasuredHeight());
        currentTop += getHeightWithMargins(mMessageText);

        if (mPostImage.getVisibility() != View.GONE) {
            layoutView(mPostImage, contentLeft, currentTop,
                       contentWidth, mPostImage.getMeasuredHeight());

            currentTop += getHeightWithMargins(mPostImage);
        }

        final int iconsWidth = contentWidth / mActionIcons.size();
        int iconsLeft = contentLeft;

        for (Action action : Action.values()) {
            final View icon = mActionIcons.get(action);

            layoutView(icon, iconsLeft, currentTop,
                       iconsWidth, icon.getMeasuredHeight());
            iconsLeft += iconsWidth;
        }
    }

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

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void update(Tweet tweet, EnumSet<UpdateFlags> flags) {
        mAuthorText.setText(tweet.getAuthorName());
        mMessageText.setText(tweet.getMessage());

        final Context context = getContext();
        ImageUtils.loadImage(context, mProfileImage, tweet.getProfileImageUrl(), flags);

        final boolean hasPostImage = !TextUtils.isEmpty(tweet.getPostImageUrl());
        mPostImage.setVisibility(hasPostImage ? View.VISIBLE : View.GONE);
        if (hasPostImage) {
            ImageUtils.loadImage(context, mPostImage, tweet.getPostImageUrl(), flags);
        }
    }
}

这个类的布局文件仍然是tweet_composite_view.xml，构造函数中初始化内部的View,与Composite
View的不同之处在于，它通过重载onMeasure和onLayout方法来确定内部View的尺寸和位置。基本思路是过程通过ViewGroup’s 的measureChildWithMargins() 方法和背后的 getChildMeasureSpec() 方法计算出了每个子视图的 MeasureSpec 。这个自定义View的效果图的布局层次如下图所示，和Composite
View的层次一样，但这个View的遍历开销要少于前者。

如果想进一步优化关键部分的UI，如ListView和GridView，可以考虑把Custom Composite
View合成单一的View统一管理，使得到的View的层次如下图所示：

要达到这个效果，需要参考Flat Custom View的自定义View方式，刚兴趣读者可参考源代码。

时间： 2024-08-04 16:10:48

Android自定义View的用法总结的相关文章

Android自定义View（二、深入解析自定义属性）

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51468648 本文出自:[openXu的博客] 目录: 为什么要自定义属性 怎样自定义属性 属性值的类型format 类中获取属性值 Attributeset和TypedArray以及declare-styleable ??在上一篇博客<Android自定义View(一.初体验)>中我们体验了自定义控件的基本流程: 继承View,覆盖构造方法 自定义属性 重写onMeasure方法测量宽

Android 自定义View合集

自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/Mr-XiaoLiang 自定义控件三部曲 http://blog.csdn.net/harvic880925?viewmode=contents Android 从0开始自定义控件之View基础知识与概念 http://blog.csdn.net/airsaid/article/details/5

Android 自定义View学习(2)

上一篇学习了基本用法,今天学一下稍微复杂一点的,先看一下效果图 为了完成上面的效果还是要用到上一期开头的四步 1,属性应该要有颜色,要有速度 <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="speed" format="integer" /> <attr name="circleColor"

AlertDialog自定义View的用法+如何改变弹出框的大小

android系统定义了弹出框,支持我们自定义布局: public AlertDialog getEditCustomDialog() { LayoutInflater inflater = getLayoutInflater(); View view = inflater.inflate(R.layout.custom_message_rename, null); AlertDialog.Builder builder = new AlertDialog.Builder(AnimationTe

Android 自定义View (二) 进阶

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自定义View之旅,前面已经介绍过一个自定义View的基础的例子,Android 自定义View (一),如果你还对自定义View不了解可以去看看.今天给大家带来一个稍微复杂点的例子. 自定义View显示一张图片,下面包含图片的文本介绍,类似相片介绍什么的,不过不重要,主要是学习自定义View的用法么. 还记得上一篇讲的4个步骤么: 1.自定义View的属性2

android 自定义view 前的基础知识

本篇文章是自己自学自定义view前的准备,具体参考资料来自 Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了解View(二) Android视图状态及重绘流程分析,带你一步步深入了解View(三) Android自定义View的实现方法,带你一步步深入了解View(四) 这位大哥的系列博文,相当于自己看这些的一个思考吧. 一.首先学layoutInflater. 相信接触Android久一点的朋友对于La

【朝花夕拾】Android自定义View篇之（八）多点触控（上）基础知识

前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/11155259.html],谢谢! 在前面的文章中,介绍了不少触摸相关的知识,但都是基于单点触控的,即一次只用一根手指.但是在实际使用App中,常常是多根手指同时操作,这就需要用到多点触控相关的知识了.多点触控是在Android2.0开始引入的,在现在使用的Android手机上都是支持多点触控的.本系列文章将对常见的多点触控相关的重点知识进行总结,并使用多点触控来实现一些常见的效果,从而达到将

Android 自定义 View 详解

View 的绘制系列文章: Android View 绘制流程之 DecorView 与 ViewRootImpl Android View 的绘制流程之 Measure 过程详解 (一) Android View 的绘制流程之 Layout 和 Draw 过程详解 (二) Android View 的事件分发原理解析 对于 Android 开发者来说,原生控件往往无法满足要求,需要开发者自定义一些控件,因此,需要去了解自定义 view 的实现原理.这样即使碰到需要自定义控件的时候,也可以游刃有

Android自定义View探索(一)—生命周期

Activity代码: public class FiveActivity extends AppCompatActivity { private MyView myView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.e("log", "Activity生命周期:onCreate"); setConte