2019日更挑战(一),android-聊聊写布局(一)
瞎扯:
写布局是最基础东西技能,其实也是最重要的技能之一.
合理的分析,才能写出好的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