Android第一次实验：微信简单界面设计

Windows系统，Android Studio

为了实现微信的界面转换功能，我们设置中间的组件为Fragment，在我们进行接下来的代码操作后，点击底部的按钮会进行界面的转换。

以下是点击通讯录后的界面。

 我们可以清晰的看到图标和文字也发生了变化

这个文件中我们主要设置了LinearLayout的背景颜色(android:background)，文本的颜色(android:textColor),文本的文字(android:text)

这个文件是聊天界面的fragment设计，其他三个和该xml文件相似，只用修改其中的文本属性

(android:text)

本xml文件展示了底部整体的LinearLayout以及其中4个小LinearLayout中间的第一个LinearLayout，即聊天按钮的区域。其中TextView对应文字，ImageView对应了图标。其中的图标必须使用android:src属性才能在实际运行环境中显示出来，而android:orientation属性可以定义布局内控件的排列方式，有垂直排列（vertical）和水平排列（horizontal）。

 这个文件中我们使用了include来导入我们设置的top和bottom的xml文件，而且设置了Fragment对应的区域。

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import android.app.Fragment;

public class ChatFragment extends Fragment {



    public ChatFragment() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_chat,container,false);
//        return null;
    }
}

自定义的Fragment类需要继承Fragment类，并且重写其中的onCreateView方法，用于返回我们所创建的关于聊天的fragment_chat.xml文件 。

这里只展示ChatFragment.java文件，其他三个和这个类似，只需要修改其中所需layout属性的id值即可。

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.Fragment;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity
//        implements View.onClickListener
{
    private ListView listView;

    //创建Fragment对象
    private Fragment weixinFragment = new ChatFragment();
    private Fragment xinwenFragment = new DiscoverFragment();
    private Fragment lianxirenFragment = new ContactsFragment();
    private Fragment shezhiFragment = new MeFragment();

    //底端菜单栏LinearLayout
    private LinearLayout linear_chat;
    private LinearLayout linear_contacts;
    private LinearLayout linear_discover;
    private LinearLayout linear_me;

    //底端菜单栏中的Imageview
    private ImageView imageView_chat;
    private ImageView imageView_contacts;
    private ImageView imageView_discover;
    private ImageView imageView_me;

    //底端菜单栏中的TextView
    private TextView textView_chat;
    private TextView textView_contacts;
    private TextView textView_discover;
    private TextView textView_me;

    //初始化fragment
    public void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.id_contet,weixinFragment);
        transaction.add(R.id.id_contet,lianxirenFragment);
        transaction.add(R.id.id_contet,xinwenFragment);
        transaction.add(R.id.id_contet,shezhiFragment);

        transaction.commit();
    }

    public void initView(){
        //初始化底端菜单栏中的LinearLayout
        linear_chat = findViewById(R.id.tab_chat);
        linear_contacts = findViewById(R.id.tab_contacts);
        linear_discover = findViewById(R.id.tab_discover);
        linear_me = findViewById(R.id.tab_me);

        //初始化底端菜单栏中的Imageview
        imageView_chat = findViewById(R.id.imageView_chat);
        imageView_contacts = findViewById(R.id.imageView_contacts);
        imageView_discover = findViewById(R.id.imageView_discover);
        imageView_me = findViewById(R.id.imageView_me);

        //初始化底端菜单栏中的TextView
        textView_chat = findViewById(R.id.textView_chat);
        textView_contacts = findViewById(R.id.textView_contacts);
        textView_discover = findViewById(R.id.textView_discover);
        textView_me = findViewById(R.id.textView_me);
    }



    private FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initFragment();
        initView();

        //默认开启的时候展示微信聊天的界面
        showFragment(0);
        //将聊天界面的图标和文字进行相应的修改(变绿)
        imageView_chat.setImageResource(R.drawable.chat_changed);
        textView_chat.setTextColor(getResources().getColor(R.color.pressViewColor));

        //设置底部第一个LinearLayout的click事件监听器
        imageView_chat.setonClickListener(new View.onClickListener() {

            @Override
            public void onClick(View view) {
                //复原底部的TextView和ImageView
                restartButton();
                //展示第一个fragment界面
                showFragment(0);
                //修改图表为对应的变绿的图标
                imageView_chat.setImageResource(R.drawable.chat_changed);
                //修改文字变绿
                textView_chat.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });
        //设置底部第二个LinearLayout的click事件监听器
        linear_contacts.setonClickListener(new View.onClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(1);
                imageView_contacts.setImageResource(R.drawable.contacts_changed);
                textView_contacts.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });
        //设置底部第三个LinearLayout的click事件监听器
        linear_discover.setonClickListener(new View.onClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(2);
                imageView_discover.setImageResource(R.drawable.discover_changed);
                textView_discover.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });
        //设置底部第四个LinearLayout的click事件监听器
        linear_me.setonClickListener(new View.onClickListener() {
            @Override
            public void onClick(View view) {
                restartButton();
                showFragment(3);
                imageView_me.setImageResource(R.drawable.me_changed);
                textView_me.setTextColor(getResources().getColor(R.color.pressViewColor));
            }
        });

    }

    private void restartButton(){
        //复原底部第一个LinearLayout的TextView和ImageView的状态
        imageView_chat.setImageResource(R.drawable.chat);
        textView_chat.setTextColor(getResources().getColor(R.color.black));
        //复原底部第二个LinearLayout的TextView和ImageView的状态
        imageView_contacts.setImageResource(R.drawable.contacts);
        textView_contacts.setTextColor(getResources().getColor(R.color.black));
        //复原底部第三个LinearLayout的TextView和ImageView的状态
        imageView_discover.setImageResource(R.drawable.discover);
        textView_discover.setTextColor(getResources().getColor(R.color.black));
        //复原底部第四个LinearLayout的TextView和ImageView的状态
        imageView_me.setImageResource(R.drawable.me);
        textView_me.setTextColor(getResources().getColor(R.color.black));
    }

    private void hideFragment(FragmentTransaction transaction){
        //用于隐藏四个fragment界面
        transaction.hide(weixinFragment);
        transaction.hide(lianxirenFragment);
        transaction.hide(xinwenFragment);
        transaction.hide(shezhiFragment);
    }

    private void showFragment(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        //点击不同的区域就会对应不同的显示
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                break;
            case 1:
                transaction.show(lianxirenFragment);
                break;
            case 2:
                transaction.show(xinwenFragment);
                break;
            case 3:
                transaction.show(shezhiFragment);
                break;
            default:
                break;
        }
        //提交本次操作
        transaction.commit();
    }

}

在这个java文件中，我们设置了有关四个fragment片段的变化代码，底部的click事件，以及底部图标和文字的变化代码。通过这些代码实现底部点击后界面的各种变化。

本次实验，我们通过导入top和bottom实现了布局中顶层和底部的实现，而且通过中间的fragment片段实现了对应界面的展示以及隐藏。通过onclick的监听器实现了点击事件的完成，熟悉了几个基础的组件例如LinearLayout，ImageView等的使用。

点击查看我的源码