微信界面Android实现

欢迎浏览我的博客

这个学期我学习到关于移动开发的课程，我将在这里记录我的学习进度，也是分享我的个人心得以及我的所学内容总结。

本次实验内容

这次我们的学习内容是对移动开发的初步了解，这次通过在Android Studio上的对微信界面的编写，通过实验的方式对移动开发有更加深刻的认识与了解。

实验成果以及代码截图

图片: ![Alt]

界面演示布局代码

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:contentDescription="@string/app_name"
            android:clickable="false"
            app:srcCompat="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

这是关于最重要的微信界面下面四个按钮之一的设计样式，这样使用四个LinearLayout然后通过调整样式，使四个按钮可以以一种很舒服的方式排列下下面。

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

这是关于主页面的代码，使用了framelayout的样式，用这个的目的是，让每个页面的东西都可以显示在各自的位置上，无论是top中的标题，还是bottom中的四个按钮，还是在中间部分显示出的内容，让他们可以合理的出现在各自的位置。

关于微信中界面转换功能实现的代码

requestWindowFeature(Window.FEATURE_NO_TITLE);

这是让软件的上面没有那个标题，让这个微信可以更加灵动，没有一个WeChat在上面显得很呆板。

    private void initFragment() {
        fm = getSupportFragmentManager();
        FragmentTransaction transaction =fm.beginTransaction();
        transaction.add(R.id.id_content,mTab01);
        transaction.add(R.id.id_content,mTab02);
        transaction.add(R.id.id_content,mTab03);
        transaction.add(R.id.id_content,mTab04);
        transaction.commit();
    }

这步是让我们之前设计好的的四个按钮所代表的内容（0~4）一起添加到缓冲区中，同时用fm = getSupportFragmentManager();，这让之后的一些函数之后也可以调用，不用再次get。

    private void initView(){
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabContact = (LinearLayout) findViewById(R.id.id_tab_contact);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

        mImgWeixin =(ImageButton)  findViewById(R.id.id_tab_weixin_img);
        mImgFrd =(ImageButton)  findViewById(R.id.id_tab_frd_img);
        mImgContact =(ImageButton) findViewById(R.id.id_tab_contact_img);
        mImgSetting =(ImageButton)  findViewById(R.id.id_tab_setting_img);
    }

这个view将内容和下面按钮图片全部先一股脑的塞到页面中，之后再通过对onclick的监听对这些页面的变换进行约束。

public class MainActivity extends AppCompatActivity implements View.OnClickListener

这句在最后通过写View.OnClickListener让全页面的点击事件都集合在之后的onclick函数中，避免要写满面的onclick事件。

@Override
    public void onClick(View v) {
        Log.d("onClick","1");
        resetImgs();

        switch (v.getId()){
            case R.id.id_tab_weixin:
                Log.d("onClick","2");
                selectFragment(0);
                break;
            case R.id.id_tab_frd:
                selectFragment(1);
                break;
            case R.id.id_tab_contact:
                selectFragment(2);
                break;
            case R.id.id_tab_setting:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

这是上面添加之后自动会生成的函数，对点击四个“按钮”赋值，用switch函数让页面可以显示出你所点到的按钮所应该显示的页面。

    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

基本的监听函数。

    private void selectFragment(int i){
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);

        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgContact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    private void resetImgs(){
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContact.setImageResource(R.drawable.tab_address_normal);
        mImgSetting.setImageResource(R.drawable.tab_settings_normal);
    }
}

这两个函数是让下面图片可以以“按着的按钮亮 没按的按钮暗”的方式显示，这个原理就是让明暗两个图片都存在那个地方，通过使点击事件传回的数值来使其他的图片hide，该亮的图片show，这部分代码不难，但是这个想法很值得思考和学习。

总结心得

这次的实验内容总体来说并不困难，最主要就是让我们从一个比较简单基础的项目入手，对Android的内容有初步的认识和了解。
我的对这次的认识主要是通过对一些样式和页面变化的了解，这是之前的学习中不太经常接触到的，让我觉得移动端的开发上是同样充满趣味，让我也学到很多知识。

代码仓库链接

https://github.com/hxlzzz/hxl-