android高仿微信布局（一）

90 阅读 0 评论 60 点赞

我是靠谱客的博主干净身影，这篇文章主要介绍android高仿微信布局（一），现在分享给大家，希望可以做个参考。

前言：

目前微信是国内使用最火的软件，因此它拥有庞大的用户群体，这点是勿用置疑的。因此我们也仿照一个微信的界面，以此来作为我们app设计的一个参考范例。

实现微信上面的标题栏的设计

怎么实现微信的标题栏呢？其实android官方已经提供给我们一个工具。叫toolbar。接下来我们讲讲怎么利用toolbar实现微信的标题栏。

首先在styles.xml修改一下

复制代码

1
2
把

复制代码

1
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

复制代码

1
2
修改为

复制代码

1
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

接着修改主布局文件，这里我命名为app_bar.xml

复制代码

1
2
添加以下代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar>

最后在主活动的onCreate事件中初始化toolbar

复制代码

1
2
添加以下代码

复制代码

1
2
3
Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

填坑

复制代码

1
2
为啥添加不了toolbar呢？

请在app目录下的build.gradle里查找是否添加了

复制代码

1
compile 'com.android.support:appcompat-v7:24.2.0'

这种类型的包，没用请手动添加。

实现微信右侧的菜单

微信的右侧菜单是menu+popuwindow实现的

复制代码

1
2
然而我们只利用menu也能实现类似的效果

添加menu.xml

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<item
        android:id="@+id/action_search"
        android:orderInCategory="10"
        android:title=""
        android:icon="@mipmap/ic_search_white_24dp"
        app:showAsAction="always" />
    <!--android:icon="@mipmap/ic_launcher"-->
    <!--orderInCategory优先级 值越大优先级越低-->
    <item
        android:id="@+id/action_location"
        android:orderInCategory="100"
        android:title=""
        android:icon="@mipmap/ic_location_on_white_24dp"
        app:showAsAction="always" />

    <item
        android:id="@+id/chats"
        android:orderInCategory="100"
        android:title="发起聊天"
        app:showAsAction="never" />
    <item
        android:id="@+id/friends"
        android:orderInCategory="100"
        android:title="添加好友"
        app:showAsAction="never" />
    <item
        android:id="@+id/photos"
        android:orderInCategory="100"
        android:title="扫一扫"
        app:showAsAction="never" />
    <item
        android:id="@+id/helps"
        android:orderInCategory="100"
        android:title="帮助与反馈"
        app:showAsAction="never" />

复制代码

1
2
在主活动里添加如下代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.




        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_location) {
            Toast.makeText(AppBarActivity.this,"location",Toast.LENGTH_SHORT).show();
            //return true;
        }
        if(id==R.id.photos){
            Toast.makeText(AppBarActivity.this,"请扫码",Toast.LENGTH_SHORT).show();
        }

        return super.onOptionsItemSelected(item);
    }

复制代码

1
2
在style.xml添加以下代码

复制代码

1
2
3
    <style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_add_white_24dp</item>
    </style>

简单吧！于是一个漂亮的微信标题栏就做成功了。
下一篇我们讲讲如何实现微信的滑动效果和底部的Tabs栏。