[Android Studio] 个人主页界面的实现

目录

接上篇：底部导航栏的实现

1.个人主页界面的设计：fragment_blank.xml

2.个人主页功能的实现类:BlankFragment.java

3.每日签到功能的实现

4.实现效果

5.图片素材

---

接上篇：[Android Studio] 底部导航栏的实现

1.个人主页界面的设计：fragment_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="?attr/colorOnPrimary"
    tools:context=".ui.blank.BlankFragment">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary">
    </androidx.appcompat.widget.Toolbar>

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="70dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="0dp"
        >
    </androidx.cardview.widget.CardView>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/app_img"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginTop="35dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/app_img" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/app_img"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:maxLength="6"
        android:text="账单日记"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:textStyle="bold" />

    <LinearLayout
        android:id="@+id/liner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_margin="20dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/signup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:gravity="center"
            android:text="每日签到"
            android:textColor="#333333"
            android:layout_marginTop="5dp"
            android:textSize="15sp" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="6">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:gravity="center"
                android:text="累计签到："
                android:textColor="#333333"
                android:textSize="15sp" />
            <TextView
                android:id="@+id/clock_day"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:gravity="center"
                android:text="0"
                android:textColor="#F43678"
                android:textSize="20sp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:gravity="center"
                android:text="天"
                android:textColor="#333333"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginBottom="30dp"
        android:layout_below="@id/liner"
        android:background="@drawable/kuang"
        android:layout_marginTop="50dp">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#1A000000"/>

        <RelativeLayout
            android:id="@+id/budget_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:clickable="true">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/budget"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="预算中心"
                android:textSize="16sp"
                android:layout_marginLeft="70dp"
                android:layout_centerVertical="true"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/right"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"/>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#1A000000"/>

        <RelativeLayout
            android:id="@+id/usehelp_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:clickable="true">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/usinghelp"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"/>

            <TextView
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="使用帮助"
                android:textSize="16sp"
                android:layout_marginLeft="70dp"
                android:layout_centerVertical="true"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/right"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"/>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#1A000000"/>

        <RelativeLayout
            android:id="@+id/about_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:clickable="true">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/about"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"/>

            <TextView
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="关于我们"
                android:textSize="16sp"
                android:layout_marginLeft="70dp"
                android:layout_centerVertical="true" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/right"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"/>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#1A000000"/>

        <RelativeLayout
            android:id="@+id/setting_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:clickable="true">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/setting"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"/>

            <TextView
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:text="设         置"
                android:textSize="16sp"
                android:layout_marginLeft="70dp"
                android:layout_centerVertical="true" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/right"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"/>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#1A000000"/>


    </LinearLayout>

</RelativeLayout>

2.个人主页功能的实现类:BlankFragment.java

package com.example.ji_zhang_ben.ui.blank;

import android.app.AlertDialog;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.example.ji_zhang_ben.R;


public class BlankFragment extends Fragment implements View.OnClickListener{

    TextView signup,clock_day;//每日签到,显示签到的天数
    RelativeLayout budget_btn,usehelp_btn,about_btn,setting_btn;  //预算中心,使用帮助,关于我们,设置
    View sigup_view;  //签到弹窗视图
    AlertDialog write;
    SharedPreferences sp;
    SharedPreferences.Editor editor;

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view= inflater.inflate(R.layout.fragment_blank, container, false);

        budget_btn = view.findViewById(R.id.budget_btn);
        usehelp_btn = view.findViewById(R.id.usehelp_btn);
        about_btn = view.findViewById(R.id.about_btn);
        setting_btn = view.findViewById(R.id.setting_btn);
        signup = view.findViewById(R.id.signup);
        clock_day = view.findViewById(R.id.clock_day);

        budget_btn.setOnClickListener(this);
        usehelp_btn.setOnClickListener(this);
        about_btn.setOnClickListener(this);
        setting_btn.setOnClickListener(this);
        signup.setOnClickListener(this);
        
        //设置累计签到的天数
        sp =getActivity().getSharedPreferences("tice", Context.MODE_PRIVATE);
        clock_day.setText(sp.getString("tice","0"));

        return view;

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.signup://签到
                setSignup();
                break;
            case R.id.budget_btn://预算中心
                Intent intent2 = new Intent(getContext(),BudgetActivity.class);
                startActivity(intent2);
                break;
            case R.id.usehelp_btn://使用帮助
                Intent intent3 = new Intent(getContext(),UsehelpActivity.class);
                startActivity(intent3);
                break;
            case R.id.about_btn://关于我们
                Intent intent4 = new Intent(getContext(),AboutActivity.class);
                startActivity(intent4);
                break;
            case R.id.setting_btn://设置
                Intent intent5 = new Intent(getContext(),SettingActivity.class);
                startActivity(intent5);
                break;

        }
    }

    //签到功能的实现
    public void setSignup(){

        //显示签到成功视图
        write = new AlertDialog.Builder(getActivity()).create();
        sigup_view = LayoutInflater.from(getActivity()).inflate(R.layout.pop_up_signup,null);
        write.setView(sigup_view);
        write.show();

        int count = Integer.parseInt(clock_day.getText().toString())+1;

        editor = sp.edit();
        editor.putString("tice",Integer.toString(count));
        editor.commit(); //写入
        onResume();//刷新
    }

    @Override
    public void onResume() {
        super.onResume();
        SharedPreferences sp =getActivity().getSharedPreferences("tice",Context.MODE_PRIVATE);
        clock_day.setText(sp.getString("tice","0"));
    }
}

 补充说明：注意配置AndroidManifest.xml文件

<activity
    android:name=".ui.blank.BudgetActivity"
    android:exported="false" />
<activity
    android:name=".ui.blank.SettingActivity"
    android:exported="false" />
<activity
    android:name=".ui.blank.AboutActivity"
    android:exported="false" />
<activity
    android:name=".ui.blank.UsehelpActivity"
    android:exported="false" />

3.每日签到功能的实现

自定义弹窗布局文件：pop_up_signup.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="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="70dp"
            android:layout_gravity="center"
            android:src="@mipmap/laud"></ImageView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:text="签到成功"
            android:textSize="30sp"
            android:textStyle="bold"></TextView>

    </LinearLayout>

</LinearLayout>

累计签到的天数，采用的是SharedPreferences存储，一开始先获取里面的值，然后设置控件id：clock_day的值。

//设置累计签到的天数 
    sp =getActivity().getSharedPreferences("tice", Context.MODE_PRIVATE);                 
    clock_day.setText(sp.getString("tice","0"));

当点击 每日签到 时，跳出弹窗提示签到成功，同时获取当前累计签到的天数值并加1，然后将结果写入SharedPreferences中，并刷新。

 //签到功能的实现
    public void setSignup(){

        //显示签到成功视图
        write = new AlertDialog.Builder(getActivity()).create();
        sigup_view = LayoutInflater.from(getActivity()).inflate(R.layout.pop_up_signup,null);
        write.setView(sigup_view);
        write.show();

        int count = Integer.parseInt(clock_day.getText().toString())+1;

        editor = sp.edit();
        editor.putString("tice",Integer.toString(count));
        editor.commit(); //写入
        onResume();//刷新
    }

4.实现效果

5.图片素材