安卓开发笔记(三十三):Android仿写微信发现
首先我们来看看仿写之后的效果:
看到是这个界面我们首先应该思考这些按钮是怎么做出来的?有了一个整体的思路之后才知道该怎么办。最开始我想的就直接利用button控件上面直接加上png的图片就可以形成一个按钮了,但当我加入图片之后,发现因为图片太大导致一个按钮都会占据一个屏幕一半的空间,实在是得不偿失,根本无法使用。如果直接利用button在上面添加图片,是不能够改变我们加入图片的大小的,虽然这是最简单的方法,但是缺陷比较多,如果实在先使用这种方法就必须自己将png图片的大小变小,但作为一个程序员还是算了。之后我又想到了自定义view,但是这个方法太麻烦了,对java的要求较高,因此才考虑到了这里的第三种方法:将每一个按钮写成一个linearlayout,并将每一个线性布局设定成可以被监听的模式,这样就可以完全当一个按钮来使用了,还可以为它设定选择器,也就是我们的selector,最后的效果和我们的button一样,点击之后也会发生颜色的改变(白色变成灰色)。
我们仔细观察,每两个按钮之间还会有一条很细的线,这条线则直接可以使用textview控件来进行填充、利用backgroud属性就可以设定textview的背景颜色,里面没有文字也没有任何关系,但是需要将textview的高度设定成0.5或者1dp。这样大体的思路就有了,还需要注意一点的是我们在进行ui布局的时候尽可能利用include进行布局,这样才会让其他程序员能够很好地进行理解。下面我们分别来看看include的布局以及我们的主界面的布局。
一.首页标题栏
首页标题栏我就直接使用了一个相对布局,后面引用两个imageview,为了效果的展示。如果真要将这两个图标设定为可以监听的话,可以直接将这个控件更改为imagebutton,并给它设定一个响应的id即可。不需要做过多的修改。这个布局我们会通过include直接引入到我们的主界面当中。
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="60dp" android:orientation="vertical" android:background="#c0c0c0" android:padding="10dp"> <textview android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:text="发现" android:textsize="15sp" /> <imageview android:layout_alignparentbottom="true" android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/sousuo" android:layout_centervertical="true" android:layout_toleftof="@+id/top_left" android:layout_marginright="29dp" /> <imageview android:layout_alignparentbottom="true" android:id="@+id/top_left" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/tianjia" android:layout_centervertical="true" android:layout_alignparentright="true"/> </relativelayout>
二.主界面代码
这部分代码你就可以清晰地看到我的思路了,凡是每两个连在一起的控件的第一个自定义的按钮,我都使用了引入布局的方式,第二个按钮则直接写在了主界面之上。具体原因是因为只有第一个按钮为引入,而不是在主界面上直接编写,这样两个按钮才会连在一起,不然就会分开,达不到仿写的效果。如果您有更好的办法来解决这个问题的话,本人感激不尽。
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:background="#c0c0c0" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <include layout="@layout/view_yop" android:id="@+id/great" > </include> <linearlayout android:background="#ffffff" android:id="@+id/gj_recruit" android:layout_width="match_parent" android:layout_height="50dip" android:layout_marginbottom="17dip" android:focusableintouchmode="true" android:clickable="true" android:orientation="horizontal" android:padding="7dip"> <imageview android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/pengyou"/> <textview android:textsize="15sp" android:layout_marginleft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友圈"/> </linearlayout> <include layout="@layout/saoyisao" android:id="@+id/great" > </include> <textview android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#c0c0c0"/> <linearlayout android:background="#ffffff" android:id="@+id/gj_recruit2" android:layout_width="match_parent" android:layout_height="50dip" android:layout_marginbottom="17dip" android:focusableintouchmode="true" android:clickable="true" android:orientation="horizontal" android:padding="7dip"> <imageview android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/yaoyi"/> <textview android:textsize="15sp" android:layout_marginleft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="摇一摇"/> </linearlayout> <textview android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#c0c0c0"/> <include layout="@layout/kanyikan" > </include> <linearlayout android:background="#ffffff" android:id="@+id/gj_recruit3" android:layout_width="match_parent" android:layout_height="50dip" android:layout_marginbottom="17dip" android:focusableintouchmode="true" android:clickable="true" android:orientation="horizontal" android:padding="7dip"> <imageview android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/souyisou"/> <textview android:textsize="15sp" android:layout_marginleft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="搜一搜"/> </linearlayout> <linearlayout android:background="#ffffff" android:id="@+id/gj_recruit4" android:layout_width="match_parent" android:layout_height="50dip" android:layout_marginbottom="17dip" android:focusableintouchmode="true" android:clickable="true" android:orientation="horizontal" android:padding="7dip"> <imageview android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/fujin"/> <textview android:textsize="15sp" android:layout_marginleft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="附近的人"/> </linearlayout> <include layout="@layout/gouwu" > </include> <textview android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#c0c0c0"/> <linearlayout android:background="#ffffff" android:id="@+id/gj_recruit5" android:layout_width="match_parent" android:layout_height="50dip" android:layout_marginbottom="17dip" android:focusableintouchmode="true" android:clickable="true" android:orientation="horizontal" android:padding="7dip"> <imageview android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/youxi"/> <textview android:textsize="15sp" android:layout_marginleft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="游戏"/> </linearlayout> <linearlayout android:background="#ffffff" android:id="@+id/gj_recruit9" android:layout_width="match_parent" android:layout_height="50dip" android:layout_marginbottom="17dip" android:focusableintouchmode="true" android:clickable="true" android:orientation="horizontal" android:padding="7dip"> <imageview android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/xiaochengxu"/> <textview android:textsize="15sp" android:layout_marginleft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="小程序"/> </linearlayout> </linearlayout>
我们可以清晰地看到这个项目所include的id组件有哪些,下面我们就分别展示下各个id所对应引入的布局。
三.gouwu.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/kan" android:layout_width="match_parent" android:layout_height="45dp" android:orientation="vertical" android:background="#ffffff" android:padding="10dp"> <imageview android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/gouwu" android:layout_centervertical="true" /> <textview android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_torightof="@+id/top_r" android:layout_marginleft="10dp" android:text="购物" android:textsize="15sp" /> </relativelayout>
四.kanyikan.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/kan" android:layout_width="match_parent" android:layout_height="45dp" android:orientation="vertical" android:background="#ffffff" android:padding="10dp"> <imageview android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/kanyikan" android:layout_centervertical="true" /> <textview android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_torightof="@+id/top_r" android:layout_marginleft="10dp" android:text="看一看" android:textsize="15sp" /> </relativelayout>
五.saoyisao.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/saoa" android:layout_width="match_parent" android:layout_height="45dp" android:orientation="vertical" android:background="#ffffff" android:padding="10dp"> <imageview android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/saoyisao" android:layout_centervertical="true" /> <textview android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_torightof="@+id/top_r" android:layout_marginleft="10dp" android:text="扫一扫" android:textsize="15sp" /> </relativelayout>
这样我们的界面编写总算是完成了,唯一博客里没有讲的就是这些png图片哪里来的了,如果大家对这个很感兴趣的话,可以在这篇博文当中看看那些png图片是怎么来的。
https://www.cnblogs.com/geeksongs/p/10769365.html
如果您有更好的方法,也可以找我聊聊
上一篇: 家长怎么都不挑食