android高仿微信布局(一)

前言:

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

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

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

首先在styles.xml修改一下

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
修改为
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

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

添加以下代码
    <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

添加以下代码
Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

填坑

为啥添加不了toolbar呢?

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

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

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


实现微信右侧的菜单

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

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

添加menu.xml

<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" />
在主活动里添加如下代码
    @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);
    }
在style.xml添加以下代码
    <style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_add_white_24dp</item>
    </style>

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

授人以鱼不如授人以渔,这里我就不发布整个工程了,剩下的事情留给大家慢慢去发挥吧!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值