android 安卓微信布局

2023-11-13 21:29:40

微信布局

直接上代码吧

---------------------------------------- 头部 -----------------------------------------------

项目 /res/layout 目录下创建 head.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#21292c"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:fontFamily="@string/kti"
        android:padding="10dp"
        android:text="@string/name"
        android:textColor="#ffffff"
        android:textSize="16sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

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

        <ImageView
            android:id="@+id/imageView1"
            style="@style/headStyle"
            android:layout_marginRight="30dp"
            android:src="@drawable/fdj" />

        <ImageView
            android:id="@+id/imageView2"
            style="@style/headStyle"
            android:layout_marginRight="10dp"
            android:src="@drawable/barbuttonicon_add" />
    </LinearLayout>

</LinearLayout>

head.xml

复制粘贴到自己的项目发现好多好多的报编译错误╭(╯^╰)╮

带@什么什么的大多都有配 (良心配方 ? (￣△￣；) )

不急不急先来一个一个解决吧 (￣m￣)

项目下res 文件下 values 文件下 strings.xml 文件

(看到就打开复制粘贴没看到ㄟ( ▔, ▔ )ㄏ就在values下面创建一个 strings.xml 文件 .xml 文件啊(σ｀д′)σ)

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">winxinmff微信界面</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="name">微信</string>
    <string name="tongxl">通讯录</string>
    <string name="tabbar">发现</string>
    <string name="ewo">我</string>
    <string name="kti">楷体</string>

</resources>

strings.xml

项目下res文件下 values文件下 styles.xml 文件

(还是那句话看的就复制粘贴)

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!-- Theme customizations available in newer API levels can go in res/values-vXX/styles.xml, 
            while customizations related to backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

    <style name="radioStyle">
        <item name="android:button">@null</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/text_color</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_marginBottom">5dp</item>
        <item name="android:textSize">9sp</item>
        <item name="android:drawablePadding">5sp</item>        
    </style>

    <style name="headStyle">
        <item name="android:layout_width">32dp</item>
        <item name="android:layout_height">22dp</item>
    </style>

</resources>

styles.xml

项目下 /res/drawable-hdpi/text_color.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:color="@color/green"></item>
    <item android:state_checked="false" android:color="@color/grey"></item>

</selector>

text_color.xml

那啥和这玩意还有是吧

这是图片有几张是透明图片自己看着办吧

如：

自己用鼠标拖拉一下就知道了

会用 git 的可以去下面这个链接里面用 git clone 命令下载图片

https://github.com/littleSeven7/sevenTeam 这个链接是它里面的图片

不管用什么方法下载下来

把图片放在项目/res/drawable-hdpi下面它会自动生成R文件

名字什么的就自己改改啦 <(￣︶￣)>

头部的版就排成这样呐 o(￣ヘ￣o#) 感觉也不容易啊（希望以后还看得懂）

排完头部那就排底部 (先说好自我感觉它比较麻烦 (? _ ?) )

---------------------------------------- 底部 -----------------------------------------------

项目下 /res/layout/bottom.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/radioButton1"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@drawable/group_buton_nomal"
        android:gravity="center"
        android:orientation="horizontal"
         >

        <RadioButton
            android:id="@+id/radioButton2"
            style="@style/radioStyle"
            android:checked="true"
            android:drawableTop="@drawable/tab_weixin"
            android:text="@string/name" />

        <RadioButton
            android:id="@+id/radioButton3"
            style="@style/radioStyle"
            android:drawableTop="@drawable/tab_set"
            android:text="@string/tongxl" />

        <RadioButton
            android:id="@+id/radioButton4"
            style="@style/radioStyle"
            android:drawableTop="@drawable/tab_find"
            android:text="@string/tabbar" />

        <RadioButton
            android:id="@+id/radioButton5"
            style="@style/radioStyle"
            android:drawableTop="@drawable/tab_sddre"
            android:text="@string/ewo" />
    </RadioGroup>
    

</LinearLayout>

bottom.xml

项目下/res/drawable-hdpi/tab_weixin.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item  android:drawable="@drawable/tabbar_mainframe" android:state_checked="false"></item>
    <item  android:drawable="@drawable/tabbar_mainframehl" android:state_checked="true"></item>
    <!--  -->

</selector>

tab_weixin.xml

项目下/res/drawable-hdpi/tab_set.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tabbar_contacts" android:state_checked="false"></item>
    <item android:drawable="@drawable/tabbar_contacts_hl" android:state_checked="true"></item>
    <!--  -->


</selector>

tab_set.xml

项目下/res/drawable-hdpi/tab_sddre.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:drawable="@drawable/tabbar_me" android:state_checked="false"></item>
    <item android:drawable="@drawable/tabbar_mehl" android:state_checked="true"></item>

</selector>

tab_sddre.xml

项目下/res/drawable-hdpi/tab_find.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:drawable="@drawable/tabbar_discover" android:state_checked="false"></item>
    <item android:drawable="@drawable/tabbar_discoverhl" android:state_checked="true"></item>
    <!--  -->


</selector>

tab_find.xml

底部就好了 <(￣︶￣)>

---------------------------------------- 组拼 -----------------------------------------------

下面就是把它们两个拼凑起来 ? ???

项目下/res/layout/weixin.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

        <include
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            layout="@layout/head" />
    </LinearLayout>
    <!-- 中间 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>
    <!-- 中间 -->

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

        <include layout="@layout/bottom" />
    </LinearLayout>

</LinearLayout>