AS第一次作业:实现APP门户界面框架设计

最新推荐文章于 2023-03-06 20:30:06 发布

ZprierH ?

最新推荐文章于 2023-03-06 20:30:06 发布

阅读量396

点赞数

文章标签： android

本文链接：https://blog.csdn.net/m0_51059344/article/details/120621811

版权

实验内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；

技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；

3.总布局 activity_main.xml

2.初始化函数initFragment()

源代码地址：ZprierH/WeiXinapphttps://gitee.com/zprierh/WeiXinapp.git

App实现结果展示

实现过程

1.基本布局的实现

本次的基本布局由三个部分组成:top,bottom,以及中间的fragment部分

利用下面4个组件对fragment进行切换,从而实现tap页面的切换

1.top.xml

top界面由一个Linearlayout构成,在其中添加一个textview实现title的声明

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/black"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="zz的应用"
        android:textColor="@color/white"
        android:textSize="30dp" />

</LinearLayout>

2.bottom.xml

bottom由四个Linearlayout构成,每个LInearlayout代表一个tap切换组件

每个Linearlayout中有一个Imageview和一个textview控件,来构成组件的图标和名字

<?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"
    android:orientation="horizontal">

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <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="20dp"/>
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tab_find_frd_normal"  />

        <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="20dp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tab_address_normal"/>

        <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="20dp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tab_settings_normal" />

        <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="20dp" />
    </LinearLayout>

</LinearLayout>

3.总布局 activity_main.xml

在中部添加一个framelayout,并在顶部和底部分别include top和bottom布局,总布局就完成了

<?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/bottom" />


</LinearLayout>

总布局结果展示

2.组件功能的实现

app界面组件由fragment实现,通过监听点击4个组件来进行fragment的切换,进而实现4个tap页面的切换

1.四个界面的布局显示

与top界面相似,都是linearlayout中包含一个textview,显示切换到了哪个界面

config_weixinfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".weixinfragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30dp"
        android:text="这里是设置" />

</LinearLayout>

contact_weixinfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".weixinfragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30dp"
        android:text="这里是新闻" />

</LinearLayout>

fragment_weixinfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".weixinfragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30dp"
        android:text="这里是微信" />

</LinearLayout>

friend_weixinfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".weixinfragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30dp"
        android:text="这里是联系人" />

</LinearLayout>

2.定义调用四个界面的类

使用Inflater，将xml文件压缩到容器中,从而显示xml中的内容

config_weixinfragment.java

package com.example.myapplication2;

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


public class config_weixinfragment extends Fragment {



    public config_weixinfragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.config_weixinfragment, container, false);
    }
}

contact_weixinfragment.java

package com.example.myapplication2;

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


public class contact_weixinfragment extends Fragment {



    public contact_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.contact_weixinfragment, container, false);
    }
}

friends_weixinfragment.java

package com.example.myapplication2;

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


public class friends_weixinfragment extends Fragment {



    public friends_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.friend_weixinfragment, container, false);
    }
}

weixinfragment.java

package com.example.myapplication2;

import android.app.Fragment;
import android.os.Bundle;
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.fragment_weixinfragment, container, false);
    }
}

3.设计主程序,实现app界面,功能

利用fragmentmanager对fragment的切换进行控制,实现使用一个组件时,隐藏其他组件的显示,只显示正在使用的组件

调用类和控件

    private Fragment weixinfragment=new weixinfragment();
    private Fragment configWeixinfragment=new config_weixinfragment();
    private Fragment contactWeixinfragment=new contact_weixinfragment();
    private Fragment friendsWeixinfragment=new friends_weixinfragment();

    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    private ImageView imageView1,imageView2,imageView3,imageView4;

1.onCreate()函数

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

        linearLayout1=findViewById(R.id.linearlayout_weixin);
        linearLayout2=findViewById(R.id.linearlayout_config);
        linearLayout3=findViewById(R.id.linearlayout_contact);
        linearLayout4=findViewById(R.id.linearlayout_friend);

        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

        initFragment();

    }

2.初始化函数initFragment()

对fragmentManager进行标准化,transaction.add函数的功能是将一个fragment添加至所选的framelayout中,即activity_main.xml中定义的中部的framelayout.

 private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,weixinfragment);
        transaction.add(R.id.id_content,contactWeixinfragment);
        transaction.add(R.id.id_content,configWeixinfragment);
        transaction.add(R.id.id_content,friendsWeixinfragment);
        hideFragment(transaction);
        transaction.commit();
    }

3.隐藏函数hideFragment()

hideFragment实现了将所有的fragment隐藏

 private void hideFragment( FragmentTransaction transaction){

        transaction.hide(weixinfragment);
        transaction.hide(contactWeixinfragment);
        transaction.hide(configWeixinfragment);
        transaction.hide(friendsWeixinfragment);
    }

4.显示函数showFragment()

每次调用showFragment(),都会先调用hideFragment(),将所有的fragment隐藏,再通过switch语句来实现定向调用组件功能

这个参数i将在OnClick函数中得到,即利用监听点击来获得调用哪个组件的信息

 private void showfragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinfragment);
                break;
            case 1:
                transaction.show(configWeixinfragment);
                break;
            case 2:
                transaction.show(contactWeixinfragment);
                break;
            case 3:
                transaction.show(friendsWeixinfragment);
                break;
            default:
                break;

        }
        transaction.commit();
    }

5.OnClick函数

利用点击获得使用哪个组件的信息,使用switch语句,当id与条件匹配,就执行下面的语句

public void onClick(View v){
        switch (v.getId()){
            case R.id.linearlayout_weixin:
                reImage(0);
                showfragment(0);
                break;
            case R.id.linearlayout_config:
                reImage(3);
                showfragment(1);
                break;
            case R.id.linearlayout_contact:
                reImage(2);
                showfragment(2);
                break;
            case R.id.linearlayout_friend:
                reImage(1);
                showfragment(3);
                break;
            default:
                break;


        }
    }

6.图标反馈函数reimage():

通过对图标明暗的改变,来区别正在使用哪个组件

分别准备了正常和点击后的两组图标,在函数开头,将所有的图标初始化,都变为正常,利用switch语句来控制哪个组件变为点击后的图标.

public void reImage(int i)
    {
        imageView1.setImageResource(R.drawable.tab_weixin_normal);
        imageView2.setImageResource(R.drawable.tab_find_frd_normal);
        imageView3.setImageResource(R.drawable.tab_address_normal);
        imageView4.setImageResource(R.drawable.tab_settings_normal);
        switch (i)
        {
            case 0:
                imageView1.setImageResource((R.drawable.tab_weixin_pressed));
                break;
            case 1:
                imageView2.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                imageView3.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                imageView4.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
    }

源代码地址：ZprierH/WeiXinapphttps://gitee.com/zprierh/WeiXinapp.git

ZprierH ?

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AS第一次作业:实现APP门户界面框架设计

实验内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；App实现结果展示实现过程1.基本布局的实现本次的基本布局由三个部分组成:top,bottom,以及中间的fragment部分利用下面4个组件对fragment进行切换,从而实现tap页面的切换1.top.xmltop界面由一个Li...
复制链接

扫一扫