类微信开发过程

最新推荐文章于 2022-11-07 11:25:06 发布

code_nigate

最新推荐文章于 2022-11-07 11:25:06 发布

阅读量631

点赞数 3

文章标签： java android ui

本文链接：https://blog.csdn.net/qq_52641282/article/details/127059741

版权

课程要求：微信的门户页面框架设计，APP最少必须包含4个tab页面。框架设计需要使用fragment，activity。

掌握了这些基本知识我们就能设计自己的app了，我们明白了自己的程序可以通过oncreat（）启动

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.top);

top为我设计的app的首页，只需通过setContentView()方法调用即可，这样在启动的时候就可以自动打开top页面进而进入我们自己的app

我们可以通过res里layout来对我们的安卓ui进行设计，我们可以通过拖动palette里的组件拖入下面的界面中进行app的设计，在图中红框可以看出，我们这个界面由三个部分构成，下面我们将分别对三个部分进行分别讲解。

我们可以首先创建一个layout的xml文件

然后拖入一个textview

效果就是这个样子，接下来我们可以对其进行设计

打开右上角的code，我们就可以对其进行设计

as的提词器功能十分强大，比如我们想改变字体的大小就可以直接输入size，第一个就是。

想要实现居中，使gravity等于center即可

想要改变字体的颜色，你可以试试textcolor

背景颜色？background就行

接下来只要修改文本内容任务就结束了，十分简单吧

一个黑底白字的标题就完成了，虽然很丑，但读者可以自己试试做的更漂亮吧

接下来我们提升难度来设计下微信下的四个点击按钮按钮吧

我们首先分析一下，微信下的四个按钮是什么样的结构

我们可以将其分为两个部分，一半是图片部分，一半是文字部分

于是我们就可以设计这样一个结构来实现这个效果

完成这些项目后主界面也就基本完成了，我们只需创建一个主页来包含这些项目就可以了

这里使用include的方式就可以把前面设计好的组件直接包含在里面，十分的方便

接下来我们学习fragment的使用方式

package com.example.work;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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


public class weixin_Fragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER

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

我们创建四个fragment类，这样就可以使得在调用我们的fragment类的时候，将我们创建的fragment的xml文件给调用出来

那我们该如何在主界面来使用我们创建的fragment类呢？

首先，创建fragment类

 private Fragment faxian_Fragment,lianxiren_Fragment,weixin_Fragment,wode_Fragment;

faxian_Fragment=new faxian_Fragment();
        lianxiren_Fragment=new lianxiren_Fragment();
        weixin_Fragment=new weixin_Fragment();
        wode_Fragment=new wode_Fragment();

再创建一个fragmentmanger

    private FragmentManager manager;

接着我们将我们的fragment压入压缩器里

manager=getSupportFragmentManager();
        FragmentTransaction transaction=manager.beginTransaction()
                .add(R.id.frameLayout,weixin_Fragment)
                .add(R.id.frameLayout,faxian_Fragment)
                .add(R.id.frameLayout,wode_Fragment)
                .add(R.id.frameLayout,lianxiren_Fragment);
        transaction.commit();

效果就是这个样子，但是我们发现所有的fragment都被压在了一起，这将是我们后面需要解决的问题

接下来我们思考，我们如何实现在点击按钮以后实现切换fragment呢

肖老师给了我们一种方式，当我们点击一个页面的时候，先隐藏其他所有的fragment，然后再显现出我们需要的fragment就行了，所以我们只需要设计出，隐藏，显现，已经按下以后的接受反应的监听器就行

首先我们设计监听器

@SuppressLint("NonConstantResourceId")
    @Override
    public void onClick(View v) {

        switch (v.getId())
        {
            case R.id.weixin_Button:select(1);

                break;
            case R.id.lianxiren_Button:select(2);

                break;
            case R.id.faxian_Button:select(3);

                break;
            case R.id.wode_Button:select(4);

                break;
        }
    }

我们这需要在主类implement 一个View.OnClickListener就行，然后as就会自动帮我们创建一个onclick类，这是我的设计方案，首先通过点击四个图片按钮来获得按钮的id，然后分为四种case

通过select（）函数传参，来进行我们需要的操作

private void select(int i){
        hidden();
        switch(i)
        {
            case 1:showFragment(weixin_Fragment);

                break;
            case 2:showFragment(lianxiren_Fragment);

                break;
            case 3:showFragment(faxian_Fragment);

                break;
            case 4:showFragment(wode_Fragment);

                break;
        }
    }

select（）函数中我们做了两个操作一个是在调用操作的时候，先隐藏所有的fragment的操作，然后再根据监视器的传参来进行判定我们需要展示哪一个fragment

private void showFragment(Fragment fragment){

        FragmentTransaction transaction=manager.beginTransaction()
                .show(fragment);
        transaction.commit();
    }

展示fragment

private void hidden(){
        manager.beginTransaction()
                .hide(faxian_Fragment)
                .hide(wode_Fragment)
                .hide(lianxiren_Fragment)
                .hide(weixin_Fragment)
                .commit();
    }

隐藏所有的fragment

既然我们写出隐藏函数，那么之前留下的问题也就迎刃而解了，我们只需要在压缩之后调用hidden函数就可以把压缩以后的fragment堆叠效果给隐藏掉了