安卓移动技术开发——类微信界面设计

Android Studio第一次作业——实现微信界面的设计

*1、内容:请根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换;
2、技术:使用布局(layouts)和分段(fragment),对控件进行点击监听;

实现界面展示:
安卓移动技术开发——类微信界面设计_第1张图片

一、界面布局分析。
1.先对button.xml界面进去设计分析,下面是显示的界面。
安卓移动技术开发——类微信界面设计_第2张图片
安卓移动技术开发——类微信界面设计_第3张图片

2.分别建立四个.xml文件weixin.xml、friend.xml、contact.xml、config.xml,显示所需的四个界面的文本内容,图片如下图所示。
(1)weixin.xml的文本内容
安卓移动技术开发——类微信界面设计_第4张图片
(2)friend.xml的文本内容
安卓移动技术开发——类微信界面设计_第5张图片
(3)contact.xml的文本内容
安卓移动技术开发——类微信界面设计_第6张图片
(4)config.xml的文本内容
安卓移动技术开发——类微信界面设计_第7张图片

3.top.xml文件对微信界面的顶部进去分析设计。
安卓移动技术开发——类微信界面设计_第8张图片

activity_main.xml主要代码如下:

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

    <include layout="@layout/top"/>

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

    </FrameLayout>

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

二、实现界面之间的跳转
通过建立4个Fragment,将4个Fragment文件放入java文件中。
安卓移动技术开发——类微信界面设计_第9张图片
然后通过fragment的代码与4个.xml文件相连接。如图展示一个weixinFragment代码:

package com.example.mywork;

import android.os.Bundle;

import android.app.Fragment;

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

public class weixinFragment extends Fragment {
     


    public weixinFragment() {
     
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
     
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.weixin, container, false);
    }
}

由于四个代码类似,这里只展示一个,然后对四个控件进行监听。
关键代码如下:

    private void  initFragment(){
     
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.id_content, weixinFragment);
        transaction.add(R.id.id_content, friendFragment);
        transaction.add(R.id.id_content, configFragment);
        transaction.add(R.id.id_content, contactFragment);
        transaction.commit();

    }
    private void  hideFragment(FragmentTransaction transaction) {
     
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(configFragment);
        transaction.hide(contactFragment);
    }

    private void showfragment(int i){
     
        FragmentTransaction transaction= fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch(i) {
     
            case 0:
                Log.d("showfragment","1");
                transaction.show(weixinFragment);
                migweixin.setImageResource(R.drawable.weixin);
                break;
            case 1:
                transaction.show(friendFragment);
                migfriend.setImageResource(R.drawable.friend);
                break;
            case 2:
                transaction.show(contactFragment);
                migcontact.setImageResource(R.drawable.contact);
                break;
            case 3:
                transaction.show(configFragment);
                migconfig.setImageResource(R.drawable.config);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
     
        Log.d("onClick","1");
        resetImg();
        switch(v.getId()){
     
            case R.id.LinearLayout1:
                showfragment(0);
                break;
            case R.id.LinearLayout2:
                showfragment(1);
                break;
            case R.id.LinearLayout3:
                showfragment(2);
                break;
            case R.id.LinearLayout4:
                showfragment(3);
                break;
            default:
                break;
        }
    }

}

最后展示最后的结果界面:
1.weixin界面。
安卓移动技术开发——类微信界面设计_第10张图片
2.friend界面。
安卓移动技术开发——类微信界面设计_第11张图片
3.contact界面。
安卓移动技术开发——类微信界面设计_第12张图片
4.config界面。
安卓移动技术开发——类微信界面设计_第13张图片

代码地址:https://gitee.com/shijia0526/demo

你可能感兴趣的