Android开发经验谈Android实用技术

2019日更挑战(一),android-聊聊写布局(一)

2019-01-01  本文已影响40人  Jlanglang

瞎扯:

写布局是最基础东西技能,其实也是最重要的技能之一.
合理的分析,才能写出好的app.也能提高开发效率.


我总结的几点:

1.熟悉控件.

既然是基础,常用的肯定要了解.
这里列一下我常用的,出现频率高的:

布局:
LinearLayout
Relativelayout
FrameLayout
ViewPager

列表:
RecyclerView

控件:
TextView
EditText
ImageView
CheckBox
Switch

5.0后的新控件:
CoordinatorLayout
TabLayout
CollapsingToolbarLayout
Toolbar
AppbarLayout
SwipeRefreshLayout

以上就是近两年我最常用的控件了.
剩下的要么不用,要么用的少,比如webview这种就没啥好提的了.

这么一看,安卓的控件是不是没多少..

列一下个人觉得差不多可以抛弃的控件
button //对,就是这玩意,我基本不用它,
ImageButton //同上
RadioButton
RadioGroup
ListView
GridView
Tabhost
TableLayout
ExpandableListView
Spinner

以上这些,我现在几乎是不用的.

2.分析布局

就如开头说的,拿到设计图,肯定是先分析.
先举个简单的例子:


image.png

一个这样的列表条目.应该怎么写?
别看简单,写法多种多样.

最简单的:

  <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="end|center_vertical"
        android:padding="8dp"
        android:text="123123" />

这种就是求快,省事,如果明确设计,求快的话,这样写就行了.


一般人的选择:

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:gravity="center_vertical"
        android:padding="8dp">

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

        <TextView
            android:gravity="right"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="123123" />
    </LinearLayout>

改动频繁时的写法:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:padding="8dp">

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

        <TextView
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="123123" />
    </RelativeLayout>

对,兼容改动最强就是Relativelayout.


有人说,实现效果不就行了嘛.怎么写都行.
确实是这样,只要你想把时间浪费在改布局上.各种加班.你就随便写.

就这个设计而言,第二种写法其实是不建议的.为什么?

1.第一种,写起来花的时间最少.一个控件就搞定了.如果改动大的话,直接就放弃这个方案了.改一下就变第二,第三种了.
2.如果样式变成了这样:


image.png

你就会发现,第二种,太死板了.代码一层套一层.

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:padding="8dp">

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

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:text="1111111" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_weight="1"
                android:text="222222222222222222222" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:text="3333333" />

                <TextView
                    android:layout_marginLeft="8dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:text="33"
                    android:textColor="#f00" />
            </LinearLayout>

        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text=">>" />
    </LinearLayout>

再看看RelativeLayout

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:padding="8dp">

        <ImageView
            android:id="@+id/iv_goods"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/tv_1"
            android:layout_toRightOf="@id/iv_goods"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1111111" />

        <TextView
            android:layout_below="@id/tv_1"
            android:layout_toRightOf="@id/iv_goods"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="222222222222222222222" />


        <TextView
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/iv_goods"
            android:layout_gravity="bottom"
            android:layout_toRightOf="@+id/iv_goods"
            android:text="3333333" />

        <TextView
            android:layout_alignBottom="@+id/iv_goods"
            android:layout_toRightOf="@id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginLeft="8dp"
            android:text="33"
            android:textColor="#f00" />

        <TextView
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text=">>" />
    </RelativeLayout>

3.从渲染性能上来讲,RelativeLayout虽然会计算定位2次.但是比起LinearLayout不停嵌套还是要好很多的.

下面来简单分析一张整体的.就拿简书的来说.

image.png

最傻的做法就是

ScrollView+SwipeRefreshLayout+LinearLayout嵌套,所有内容用线性布局依次写下去.

如果没有SwipeRefreshLayout.我相信很多人,根本不会考虑recycleview.
就线性布局嵌套写完了,然后套个ScrollView,再加个弹性边界,完美.是不是.
我以前也是做过这个事的.

说说这么写的坏处:

image.png

这些内容无法后台控制.自己要添加删除隐藏也麻烦.
一个萝卜一个坑.加一个挖一个,删一个填一个.
代码就多了.
等到需求需要:点击埋点.权限控制.动态展示样式.动态隐藏显示的时候,你就会发现.自己搞不下去了.哈哈.控制层全是判断.

这种写死布局的方法是不推荐的.

4.尽量杜绝嵌套

当你发现写布局需要各种嵌套,而且还有事件冲突的时候,就该想想,是不是自己的分析有问题了.

就这样吧,日更第一天.


您的喜欢与回复是我最大的动力-_-
交流群:493180098

上一篇 下一篇

猜你喜欢

热点阅读