[Android learning] 2. Product about interface design

Through the study of layout, it is the first time to write the design of the entire interface, mainly to exercise my basic layout nesting ability, and record it for future work and study!

Design Interface Diagram 

 Design ideas

1. Exercise your basic layout ability, the entire page layout adopts LinearLayout nested layer by layer.

2. In addition to the TextView text box control, two Switch controls are used.

3. Realize hyperlinks to some text in the text box by customizing the getClickSpan method.

4. The two Button buttons use AlertDialog to prompt, and the completion uses toast to prompt.

design code

1. Layout file code:

<?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"
    android:background="@drawable/background"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="2">
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        //设备名称那一行
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="40dp"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="设备名称"
                android:textSize="20dp"
                android:textColor="#fff"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginRight="15dp"
                android:text="CHUIZI-918"
                android:textSize="20dp"
                android:textColor="#fff"
                android:gravity="right"/>

        </LinearLayout>
        //下划线那一行
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#fff" />
        //开启自动下载并更新那一行
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="开启自动下载并更新系统"
                android:textColor="#fff"
                android:textSize="20dp" />
            <Switch
                android:id="@+id/s_v1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
             />

        </LinearLayout>
        //为避免未及时更新一行
        <TextView
            android:id="@+id/tv_privacy1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="为避免未及时更新而导致的软件问题,强烈建议您勾选“自动下载并更新系统”选项。更多信息,请参阅关于系统更新与隐私的声明。"
            android:textColor="#fff"
            android:layout_marginTop="5dp"/>
        //下划线一行
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#fff"
            android:layout_marginTop="5dp"/>
        //加入用户体验一行
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="加入用户体验计划"
                android:textSize="20dp"
                android:textColor="#fff"/>
            <Switch
                android:id="@+id/s_v2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
            />
        </LinearLayout>
        //"用户体验改进计划"一行
        <TextView
            android:id="@+id/tv_privacy2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="“用户体验改进计划”是由华为终端有限公司提供的一项功能,旨在改进用户服务体验。本功能需要联网,调用存储权限,获取设备信息,用于功能性改进。打开上面的开关,即表示您同意此通知及关于用户体验改进计划与隐私的声明。"
            android:textColor="#fff"
            android:autoLink="all"
            />
        //下划线一行
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#fff"
            android:layout_marginTop="5dp"/>
        //恢复出厂设置一行
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="恢复出厂设置"
                android:textSize="20dp"
                android:textColor="#fff"/>
            // “>”一行
            <Button
                android:id="@+id/bn1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="20dp"
                android:layout_weight="1"
                android:background="@null"
                android:gravity="right"
                android:text=">"
                android:textColor="#fff"
                android:textSize="20dp" />
        </LinearLayout>
        //下划线一行
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#fff"
            android:layout_marginTop="8dp"/>
        //软件更新一行
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="7dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="软件更新"
                android:textSize="20dp"
                android:textColor="#fff"/>

           //检查更新
            <Button
                android:id="@+id/bn2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginRight="20dp"
                android:layout_weight="1"
                android:background="@null"
                android:gravity="right"
                android:text="检查更新 >"
                android:textColor="#fff"
                android:textSize="20dp" />
        </LinearLayout>
        // 版本一行
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="版本:6.8.0.619(C233)"
            android:textColor="#fff"/>

    </LinearLayout>

</LinearLayout>

Notebook: XML layout file comment shortcut key: Ctrl+/ ;

2. Main activity code 

package com.example.dialog;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.app.ActionBar;
import android.app.Notification;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.TextPaint;
import android.text.method.LinkMovementMethod;
import android.text.style.ClickableSpan;
import android.text.style.ForegroundColorSpan;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Button bn1,bn2;
    TextView tv_privacy1,tv_privacy2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        androidx.appcompat.app.ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null)actionBar.hide();
        bn1 = (Button)findViewById(R.id.bn1);
        bn2 = (Button)findViewById(R.id.bn2);
        tv_privacy1 = (TextView)findViewById(R.id.tv_privacy1);
        tv_privacy2 = (TextView)findViewById(R.id.tv_privacy2);
        //---------------------设置按钮1:恢复出厂设置  按钮2:检查更新按钮--------------------------------/
        bn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder dialog1 = new AlertDialog.Builder(MainActivity.this);
                dialog1.setTitle("警告");
                dialog1.setMessage("确定要恢复出厂设置吗?");
                dialog1.setCancelable(false);
                dialog1.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                    }
                });
                dialog1.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(MainActivity.this,"已恢复出厂设置",Toast.LENGTH_SHORT).show();
                    }
                });
                dialog1.show();
            }
        });
        bn2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                AlertDialog.Builder dialog2 = new AlertDialog.Builder(MainActivity.this);
                dialog2.setMessage("检测到有新版本发布,是否更新");
                dialog2.setPositiveButton("更新", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(MainActivity.this,"更新完成",Toast.LENGTH_SHORT).show();
                    }
                });
                dialog2.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                    }
                });
                dialog2.show();
            }
        });
    //------------------------------------Button按钮设置完成-----------------------------------------/

    //----------------------------对TextView1,2进行超链接跳转-----------------------------------------/
        tv_privacy1.setText(getClickableSpan1());
        tv_privacy1.setMovementMethod(LinkMovementMethod.getInstance());
        tv_privacy2.setText(getClickableSpan2());
        tv_privacy2.setMovementMethod(LinkMovementMethod.getInstance());
    //----------------------------用户协议部分完成----------------------------------------------------/

    }
    //------------------------自定义getClickableSpan方法,用于跳转自定部分-------------------------------/
    private SpannableString getClickableSpan1(){
        SpannableString spannableString = new SpannableString(tv_privacy1.getText().toString());
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(@NonNull View widget) {
                Intent intent1 = new Intent(MainActivity.this,UserPrivacymsg.class);
                startActivity(intent1);
            }

            @Override
            public void updateDrawState(@NonNull TextPaint ds) {
                super.updateDrawState(ds);
                ds.setUnderlineText(false);
            }
        };
        spannableString.setSpan(clickableSpan,48,58, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        return spannableString;
    }
    private SpannableString getClickableSpan2(){
        SpannableString spannableString = new SpannableString(tv_privacy2.getText().toString());
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(@NonNull View widget) {
                Intent intent1 = new Intent(MainActivity.this,UserPrivacymsg2.class);
                startActivity(intent1);
            }

            @Override
            public void updateDrawState(@NonNull TextPaint ds) {
                super.updateDrawState(ds);
                ds.setUnderlineText(false);
            }
        };
        spannableString.setSpan(clickableSpan,87,103, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        return spannableString;
    }
    //------------------------------getClickableSpan方法设置完成-------------------------------------/
}

question:

1. Wrote that AlertDialog does not run and does not pop up during debugging.

Solution: Remember not to forget to call dialog.show();

2. The title bar is hidden in the main activity, and the same ActionBar.hide(); method cannot be hidden in other activities.

Solution: Remember to introduce the following in the registration Xml file:

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

3. Select part of the text in the TextView to hyperlink to the desired active page.

Solution: Use the custom method getClickableSpan to select the part of the required hyperlink through spanableString.setSpan.

    private SpannableString getClickableSpan1(){
        SpannableString spannableString = new SpannableString(tv_privacy1.getText().toString());
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(@NonNull View widget) {
                Intent intent1 = new Intent(MainActivity.this,UserPrivacymsg.class);
                startActivity(intent1);
            }

            @Override
            public void updateDrawState(@NonNull TextPaint ds) {
                super.updateDrawState(ds);
                ds.setUnderlineText(false);
            }
        };
        spannableString.setSpan(clickableSpan,48,58, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        return spannableString;
    }
        tv_privacy1.setText(getClickableSpan1());
        tv_privacy1.setMovementMethod(LinkMovementMethod.getInstance());

Basically finished writing the simple product introduction setting page, there is still a lot of room for improvement.

Thanks!

mutual encouragement!

Guess you like

Origin blog.csdn.net/qq_43542689/article/details/126921811