Android Studio搭建简单类微信小程序首页框架

这篇具有很好参考价值的文章主要介绍了Android Studio搭建简单类微信小程序首页框架。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、页面布局

2、代码具体实现

3、界面展示


1、页面布局

第一步:创建top.xml和bottom.xml.文件,用于设计界面顶部与底部按键。再修改activity_main.xml文件,将前面两个文件效果加入。最后设计四个功能界面。

Android Studio搭建简单类微信小程序首页框架

1、 top.xml

用于首页标题显示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#4CAF50">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="我的微信"
        android:textColor="@color/black"
        android:textSize="30sp" />
</LinearLayout>

bottom.xml

四个linearlayout(线性布局)中均包含一个textview和一个imageview。

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

        <ImageView
            android:id="@+id/weixinButton"
            android:layout_width="match_parent"
            android:layout_height="49dp"
            app:srcCompat="@drawable/message" />

        <TextView
            android:id="@+id/weixinText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="20sp" />
    </LinearLayout>

2、修改activity_main.xml

导入顶部和底部布局,中间界面使用Framlayout

<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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

3、四个fragment.xml文件编写

创建切换时的四个界面

Android Studio搭建简单类微信小程序首页框架

这里以信息界面为例

<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=".WeChatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信消息界面"
        android:textSize="34sp" />

</LinearLayout>

 2、代码具体实现

主要实现的功能:

1.点击时切换fragment内容
2.点击时改变底部被点击的按钮的颜色

每个fragment.xml文件对应一个fragment.java文件,更改页面id即可将页面内容放进类中。

package com.example.wechat;

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

import androidx.fragment.app.Fragment;


public class WeChatFragment extends Fragment {


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

}

 MainActivity.java文件编写

package com.example.wechat;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Fragment WeChatFragment;
    private Fragment friendFragment;
    private Fragment circleFragment;
    private Fragment configFragment;
    private FragmentManager fm;

    private ImageView weixinButton;
    private ImageView friendButton;
    private ImageView findButton;
    private ImageView SettingButton;

    private TextView weixinText;
    private TextView friendText;
    private TextView findText;
    private TextView SettingText;

    private LinearLayout tab01,tab02,tab03,tab04;



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

        WeChatFragment=new WeChatFragment();
        circleFragment=new circleFragment();
        friendFragment=new friendFragment();
        configFragment=new configFragment();

        tab01=findViewById(R.id.tab01);
        tab02=findViewById(R.id.tab02);
        tab03=findViewById(R.id.tab03);
        tab04=findViewById(R.id.tab04);

        weixinButton=findViewById(R.id.weixinButton);
        friendButton=findViewById(R.id.friendButton);
        findButton=findViewById(R.id.findButton);
        SettingButton=findViewById(R.id.SettingButton);

        weixinText=findViewById(R.id.weixinText);
        friendText=findViewById(R.id.friendText);
        findText=findViewById(R.id.findText);
        SettingText=findViewById(R.id.SettingText);

        fm=getSupportFragmentManager();
        initalfragment();


        tab01.setOnClickListener(this);
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);

    }

    private void initalfragment() {
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.content,WeChatFragment);
        transaction.add(R.id.content,friendFragment);
        transaction.add(R.id.content,circleFragment);
        transaction.add(R.id.content,configFragment);
        Hide(transaction);
        transaction.show(WeChatFragment);
        transaction.commit();
    }


    @Override
    public void onClick(View view) {
        resetBtn();
        switch (view.getId()){
            case R.id.tab01:
                show(1);
                break;
            case R.id.tab02:
                show(2);
                break;
            case R.id.tab03:
                show(3);
                break;
            case R.id.tab04:
                show(4);
                break;
            default:
                break;
        }
    }

    private void show(int i) {
        FragmentTransaction transaction=fm.beginTransaction();
        Hide(transaction);
        switch (i){
            case 1:transaction.show(WeChatFragment);weixinButton.setImageResource(R.drawable.message_pressed);break;
            case 2:transaction.show(friendFragment);friendButton.setImageResource(R.drawable.friend_pressed);break;
            case 3:transaction.show(circleFragment);findButton.setImageResource(R.drawable.circle_pressed);break;
            case 4:transaction.show(configFragment);SettingButton.setImageResource(R.drawable.setting_pressed);break;
            default:
                break;
        }
        transaction.commit();

    }

    private void Hide(FragmentTransaction transaction) {
        transaction.hide(WeChatFragment);
        transaction.hide(friendFragment);
        transaction.hide(circleFragment);
        transaction.hide(configFragment);
    }

    private void resetBtn(){
        weixinButton.setImageResource(R.drawable.message);
        friendButton.setImageResource(R.drawable.friend);
        findButton.setImageResource(R.drawable.circle);
        SettingButton.setImageResource(R.drawable.setting);
    }
}

3、界面展示

      

Android Studio搭建简单类微信小程序首页框架

                                    ​​​​​​​        ​​​​​​​

Android Studio搭建简单类微信小程序首页框架

Android Studio搭建简单类微信小程序首页框架

Android Studio搭建简单类微信小程序首页框架

 文章来源地址https://www.toymoban.com/news/detail-486205.html

源码地址:

https://gitee.com/qian-jiahao/WeChat.git​​​​​​​

 

 

 

 

 

到了这里,关于Android Studio搭建简单类微信小程序首页框架的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序之会议OA系统首页布局搭建与Mock数据交互

    目录 前言 一、Flex 布局( 分类 编程技术) 1、Flex布局是什么? 2、基本概念 3、容器的属性 3.1 flex-direction属性 3.2 flex-wrap属性 3.3 flex-flow 3.4 justify-content属性 3.5 align-items属性 3.6 align-content属性 4、项目的属性 4.1 order属性 4.2 flex-grow属性 4.3 flex-shrink属性 4.4 flex-basis属性 4.5 fl

    2024年02月08日
    浏览(50)
  • 推荐一款工具类微信小程序,感兴趣的朋友可以看看

    目录 1、文本处理 2、图像处理 3、效率计算 4、娱乐类 5、部分源码介绍 微信小程序是一种基于微信平台的应用程序,它可以在微信中直接运行,无需下载和安装。以下是微信小程序的一些特点和介绍:   快速启动 :微信小程序无需下载和安装,用户可以直接在微信中打开使

    2024年02月16日
    浏览(42)
  • 微信小程序:实现微信小程序应用首页开发 (本地生活首页)

    小程序应用页面开发 1、创建项目并配置项目目录结构 创建项目我相信大家都会,不会的可以csdn搜索即可 这里我们需要对项目目录进行修改配置 在 app.json 文件中的 pages 数组中添加三个页面,如上图所示,然后我们将其他默认的两个进行删除,然后左侧目录 pages 文件夹中的

    2024年02月19日
    浏览(52)
  • 微信小程序首页设计

    1. 实现效果 2. 轮播 indicator-dots= “true” | “false” 1. 实现效果 2. 上图下字 flex-direction: row | row-reverse | column | column-reverse; row(默认):主轴水平方向,起点在左端; row-reverse:主轴水平方向,起点在右端; column:主轴垂直方向,起点在上边沿; column-reserve:主轴垂直方向,

    2024年02月09日
    浏览(46)
  • 微信小程序制作日常生活首页

    这里有源代码+图片 CSDN社区地址直达:http://t.csdn.cn/NEeOT 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 1、需要配置导航栏的效果(在app.json中进行配置 在windows中配置) 2、配置tabBar效果(在app.json中进行配置、需要额外增加tabBar)

    2024年02月10日
    浏览(66)
  • 微信小程序之后台首页交互

    目录 一.与后台数据进行交互request封装 后台准备 测试结果 ​编辑   前端  测试结果  二.wxs的介绍以及入门  测试结果 后台准备 pom.xml文件编写 建立数据表 建立数据请求地址类  定义接口类  测试结果    前端 先关闭mock    先编写url地址  编写utils.js 编写index.js   编写

    2024年02月08日
    浏览(54)
  • Android开发-UI界面--类微信页面设计

    一、功能说明 二、开发技术 ​ 本次用到了 layout.xml、控件、监听、fragment layout(布局) ​ 定义了用户界面的可视化结构,主要有4种布局: ConstrainLayout (约束布局):一个使用“相对定位”灵活地确定微件的位置和大小的一个布局 LinearLayout (线性布局):按照水平或垂直

    2024年02月10日
    浏览(41)
  • 微信小程序:微信小程序中首页onLoad()函数加载两次问题(已解决)

    我在学习微信小程序的开发的过程中,在学到云开发时,首页要加载服务器数据,发现onLoad函数被加载了两次,如图 然后来搜,发现问题出在了onShow函数这,这个函数只有在此页面第一次加载时才会被调用,而这个函数里不知道什么时候加上了这行代码 this.onLoad() (可能是开

    2024年02月16日
    浏览(37)
  • 本地搭建微信小程序或者公众号开发服务器的简单方法

    现在小程序开发需要购买服务器,价格还是有点贵的,这里好代码网分享一个可以花费小代价就可以搭建一个本地服务器,可以用来开发小程序和微信公众号等。 1.域名(备案过的) 2.阿里云注册免费的https证书 3.配置本地的nginx 4.内网映射(本地安装wampserver 服务器) 一、域

    2024年02月02日
    浏览(65)
  • 微信小程序首页-----布局(详细教程赶快收藏吧)

                                                      🎬 艳艳耶✌️:个人主页                                                   🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》                                                   ⛺️ 越努力 ,越幸运

    2024年02月04日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包