Android开发——app门户设计

内容简介
源码地址：Android开发: 本人开发学习Androidhttps://gitee.com/kyrieIrving1/android-development
1.实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；
2.使用布局（layouts）和分段（fragment），对控件进行点击监听
3.使用git将项目传至gitee。

UI设计

以手机微信主界面为例：
  应将主界面分为三个版块，top,content,bottom；

top
  在top版块应该展示出该主界面的标题，即wechat，在AS中，可在layout使用textview部件居中展示该文字效果。

content
  在该板块，应该能够根据底部功能栏的切换而随之切换。因此，在AS中，可以使用FrameLayout实现该功能，在FrameLayout中包含五个fragment部件对应五个功能栏即可。

bottom
  在bottom版块中，进一步分析应将其水平划分为五个LinearLayout，在每一个LinearLayout中应该再垂直划分为两个LinearLayout

实验过程
1、bottom.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="wrap_content"
    android:background="@color/black">

    <LinearLayout
        android:id="@+id/LinearLayout_News"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="40sp"
            android:src="@drawable/news01" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="资讯"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_chat"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/chat" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_community"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/community" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_record"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/record" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="战绩"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/LinearLayout_me"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/me" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </LinearLayout>
</LinearLayout>

2.top.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="wrap_content"
    android:background="@color/black">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="王者营地"
        android:textColor="@color/white"
        android:gravity="center"
        android:textSize="24sp"/>
</LinearLayout>

3.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"
    tools:context=".MainActivity"
    android:orientation="vertical">

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

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

    </FrameLayout>

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

</LinearLayout>

4.内容分段fragement.xml

界面中间显示内容，有五个主界面所以要有五个xml分别对应。五个xml代码基本一样只需要修改文本内容即可，这儿就只展示了第一个资讯界面的fragment_news.xml。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="NewsFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是资讯界面"
        android:textSize="50sp"  />

</FrameLayout>

5、内容分段对应java文件
仅展示其中一个java文件，其余四个文件都类似

package com.example.mywechat01;

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

import android.app.Fragment;

public class NewsFragment extends Fragment {


    public NewsFragment() {
        // 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.fragment_news, container, false);
    }
}

6、主函数MainActivity.java

package com.example.mywechat01;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment chatFragment = new ChatFragment();
    private Fragment communityFragment = new CommunityFragment();
    private Fragment meFragment = new MeFragment();
    private Fragment newsFragment = new NewsFragment();
    private Fragment recordFragment = new RecordFragment();
    private FragmentManager fragmentManager;
    private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4,LinearLayout5;
    private TextView textView1,textView2,textView3,textView4;


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

        LinearLayout1 = findViewById(R.id.LinearLayout_News);
        LinearLayout2 = findViewById(R.id.LinearLayout_chat);
        LinearLayout3 = findViewById(R.id.LinearLayout_community);
        LinearLayout4 = findViewById(R.id.LinearLayout_record);
        LinearLayout5 = findViewById(R.id.LinearLayout_me);

        LinearLayout1.setOnClickListener(this);
        LinearLayout2.setOnClickListener(this);
        LinearLayout3.setOnClickListener(this);
        LinearLayout4.setOnClickListener(this);
        LinearLayout5.setOnClickListener(this);
        initFragment();
        showFragment(0);

    }

    private void initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,newsFragment);
        transaction.add(R.id.content,chatFragment);
        transaction.add(R.id.content,communityFragment);
        transaction.add(R.id.content,recordFragment);
        transaction.add(R.id.content,meFragment);
        transaction.commit();
    }

    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(newsFragment);
        transaction.hide(chatFragment);
        transaction.hide(communityFragment);
        transaction.hide(recordFragment);
        transaction.hide(meFragment);
    }



    private void showFragment(int i){
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(newsFragment);
                LinearLayout1.setBackgroundColor(Color.rgb(255,0,0));
                LinearLayout2.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout3.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout4.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout5.setBackgroundColor(Color.rgb(0,0,0));
                break;
            case 1:
                transaction.show(chatFragment);
                LinearLayout1.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout2.setBackgroundColor(Color.rgb(255,0,0));
                LinearLayout3.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout4.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout5.setBackgroundColor(Color.rgb(0,0,0));
                break;
            case 2:
                transaction.show(communityFragment);
                LinearLayout1.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout2.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout3.setBackgroundColor(Color.rgb(255,0,0));
                LinearLayout4.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout5.setBackgroundColor(Color.rgb(0,0,0));
                break;
            case 3:
                transaction.show(recordFragment);
                LinearLayout1.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout2.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout3.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout4.setBackgroundColor(Color.rgb(255,0,0));
                LinearLayout5.setBackgroundColor(Color.rgb(0,0,0));

                break;
            case 4:
                transaction.show(meFragment);
                LinearLayout1.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout2.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout3.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout4.setBackgroundColor(Color.rgb(0,0,0));
                LinearLayout5.setBackgroundColor(Color.rgb(255,0,0));
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout_News:
                showFragment(0);
                break;
            case R.id.LinearLayout_chat:
                showFragment(1);
                break;
            case R.id.LinearLayout_community:
                showFragment(2);
                break;
            case R.id.LinearLayout_record:
                showFragment(3);
                break;
            case R.id.LinearLayout_me:
                showFragment(4);
                break;
            default:
                break;

        }
    }
}

结果展示

 源码的代码仓库地址：

Android开发: 本人开发学习Android