anyuan2002.com - vwin网

查找: 您的方位主页 > 网络频道 > 阅览资讯:Android开发----UI装备的一些知识点

Android开发----UI装备的一些知识点

2019-04-19 06:18:16 来历:www.anyuan2002.com 【

因为本人在自学Android开发,所以预备记下学习过程中的一些琐碎的知识点,本篇文章首要是介绍一些UI方面的知识点,(登录界面)总的UI完成效果如下,自行与下述各部分一一对应

Android开发----UI装备的一些知识点

一.设置statusBar的色彩

  • 先在app/res/values/color.xml中,增加自界说的色彩变量
  <color name="colorStatusBar">#EBBD16</color>
  • 翻开app/res/values/style.xml,将原先的
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

改为咱们规划的色彩:

    <item name="colorPrimaryDark">@color/colorStatusBar</item>

或许直接增加一条item

<item name="android:statusBarColor">@color/colorStatusBar</item>

当item<android:statusBarColor>和item<colorPrimaryDark>一起呈现时,前者优先级更高,会掩盖后者的设置

colorPrimaryDark和statusBarColor两者的异同点:

相同点:

都用来修正StatusBar的色彩

Android5.0以上才支撑的

不同点:

statusbarColor具有更高的优先级

statusBarColor在Android5.0以下会呈现正告提示

默许情况下,statusBarColor的值会承继自colorPrimaryDark

二.欢迎界面的逻辑

设置欢迎界面在必定的延迟时刻后,跳转到指定界面的过程:

(1)创立Timer目标

(2)调用Timer的schedule,重写TimerTask并设置延迟时刻

    private Timer skipTimer;
    skipTimer = new Timer();
    skipTimer.schedule(new TimerTask() {
      @Override
      public void run() {
        Intent intent = new Intent(WelcomeActivity.this,XXXActivity.class);
        //XXXActivity为指定的跳转Activity
        startActivity(intent);
      }
    },3 * 1000);

三.NavigationBar

在app/src/main/res/layout中创立nav_bar.xml,代码自界说如下:

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="@dimen/navBarHeight"
  android:background="@color/mainColor"
  android:paddingLeft="@dimen/marginSize"
  android:paddingRight="@dimen/marginSize">
  
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src = "@mipmap/back"
    android:layout_gravity="center_vertical"/>

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/navBarTitleSize"
    android:textColor="@android:color/white"
    android:text="@string/initNavBarTitle"
    android:layout_gravity="center"/>

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/me"
    android:layout_gravity="right|center_vertical"/>

</FrameLayout>

其间@mimap/back和@mimap/me为app/src/main/res/mipmap-hdpi下的自己引进的图片

@string/initNavBarTitle为app/src/main/res/values/string.xml下界说的字符串变量

  <string name="initNavBarTitle">测验</string>

@dimen/navBarTitleSize、@dimen/navBarHeight、@dimen/marginSize为app/src/main/res/values/dimen.xml中自界说的变量,其间 @dimen/navBarTitleSize为navigationBar中的TextView的文本巨细,@dimen/navBarHeight为navigationBar的高度,@dimen/marginSize为navigationBar的内距离,

界说示例:

  <dimen name="navBarHeight">56dp</dimen>
  <dimen name="marginSize">12dp</dimen>
  <dimen name="navBarTitleSize">22sp</dimen>

在其他界面引进布局文件中,只需运用include办法,示例如下:

<?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=".activities.LoginActivity">

  <include layout="@layout/nav_bar"/>


</LinearLayout>

四.自界说View(自界说登录框)

1.自界说特点

(1)承认需求自界说的特点后,在app/main/res/values中新建一个命名为attrs的xml文档(假如现已存在则不需求从头创立)

(2)增加自界说变量

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!--声明款式-->
  <declare-styleable name="inputView">
    <!--声明变量-->
    <!--输入框前面的小图标-->
    <attr name="input_icon" format="reference"></attr>
    <!--输入框内的提示内容-->
    <attr name="input_hint" format="string"></attr>
    <!--输入框内容是否需求以密文方式展现-->
    <attr name="is_password" format="boolean"></attr>
  </declare-styleable>
</resources>

2.自界说控件

(1)代码

创立一个InputView承继FrameLayout,然后重写办法,并且绑定自界说布局和布局相关自界说特点,代码如下

import android.content.Context;
import android.content.res.TypedArray;
import android.os.Build;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.text.InputType;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.musicplaer.eminemmusic.R;

/**自界说控件
 * 以下是自界说的特点:
 * input_icon:输入框前的提示图标
 * input_hint:输入框内的提示文字
 * is_password:承认输入框的内容需不需求以密文的方式展现
 */
public class InputView extends FrameLayout {
  //声明与自界说特点相对应的变量\
  private int inputIcon;
  private String inputHint;
  private boolean isPassword;

  //控件
  private View mView;
  private ImageView iv_icon;
  private EditText ed_input;

  public InputView( @NonNull Context context) {
    super(context);
    init(context,null);
  }

  public InputView( @NonNull Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init(context,attrs);
  }

  public InputView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context,attrs);
  }

  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  public InputView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init(context,attrs);
  }

  /**
   * 初始化办法
   * @param context 上下文组件
   * @param attrs 自界说变脸
   */
  private void init(Context context,AttributeSet attrs){
    if(attrs == null){
      return;
    }

    //获取自界说特点
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.inputView);
    inputIcon = typedArray.getResourceId(R.styleable.inputView_input_icon,R.mipmap.logo);
    inputHint = typedArray.getString(R.styleable.inputView_input_hint);
    isPassword = typedArray.getBoolean(R.styleable.inputView_is_password,false);
    typedArray.recycle();//便利后期再次调用,相当于清空的功用


    //绑定layout布局
    mView = LayoutInflater.from(context).inflate(R.layout.input_view,this,false);
    iv_icon = mView.findViewById(R.id.iv_icon);
    ed_input = mView.findViewById(R.id.ed_input);

    //布局相关特点
    iv_icon.setImageResource(inputIcon);
    ed_input.setHint(inputHint);
    ed_input.setInputType(isPassword ? InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD : InputType.TYPE_CLASS_PHONE);

    //增加视图
    addView(mView);

  }


  //获取自界说View的输入内容
  public String getInputStr(){
    return ed_input.getText().toString().trim();
  }
}

(2)View布局

在app/src/main/res/layout中创立input_view.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="@dimen/inputViewHeight"
  android:orientation="horizontal"
  android:gravity="center_vertical"
  android:paddingRight="@dimen/marginSize"
  android:paddingLeft="@dimen/marginSize">

  <ImageView
    android:id="@+id/iv_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/phone"/>

  <EditText
    android:id="@+id/ed_input"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:hint="@string/username"
    android:background="@null"
    android:paddingLeft="@dimen/marginSize"
    android:paddingRight="@dimen/marginSize"
    android:textSize="@dimen/inputTextView"/>

</LinearLayout>

(2)增加自界说View,"android:"是运用体系界说特点时运用,"app:"运用自界说特点时运用

<?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=".activities.LoginActivity">

  <include layout="@layout/nav_bar"/>

  <ImageView
    android:layout_width="295dp"
    android:layout_height="235dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="@dimen/marginSize"
    android:src="@mipmap/logo" />

  <com.musicplaer.eminemmusic.views.InputView
    android:layout_width="match_parent"
    android:layout_height="@dimen/inputViewHeight"
    android:layout_marginTop="@dimen/marginSize"
    app:input_icon="@mipmap/phone"
    app:input_hint="@string/phone"
    app:is_password="false">

  </com.musicplaer.eminemmusic.views.InputView>
</LinearLayout>

四.自界说大局控件(差异于自界说View)

在app/src/main/res/values/styles.xml中中增加自界说控件,下文分别为,自界说直线和自界说按钮格局的style标签

  <!--界说分割线-->
  <style name="line">
    <item name="android:layout_height">1dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:background">@color/lineColor</item>
    <item name="android:layout_margin">@dimen/marginSize</item>
  </style>

  <!--登录注册按钮-->
  <style name="commitButton">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/commitButtonHeight</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">@dimen/textSize</item>
    <item name="android:layout_marginLeft">@dimen/marginSize</item>
    <item name="android:layout_marginRight">@dimen/marginSize</item>
    <item name="android:gravity">center</item>
    <!--布景色彩要完成点击和未点击的差异-->
    <item name="android:background">@drawable/btn_commit_selector</item>
  </style>

五.自界说控件色彩和形状

上面代码中的@drawable/btn_commit_selector是自界说的空间色彩,在该xml中设定了控件在不同情况下的不同显现成果,该xml的途径为app/src/main/res/drawable/btn_commit_selector,代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">

  <!--View处于高亮状况-->
  <item android:state_focused="true"
    android:drawable="@drawable/commit_btn_h"/>

  <item android:state_pressed="true"
    android:drawable="@drawable/commit_btn_h"/>

  <item android:state_selected="true"
    android:drawable="@drawable/commit_btn_h"/>

  <!--View处于默许状况-->
  <item android:drawable="@drawable/commit_btn_n"/>
</selector>

@drawable/commit_btn_n和@drawable/commit_btn_h为按钮默许和高亮两种情况下对应的空间形状,对应如下

@drawable/btn_commit_n

<?xml version="1.0" encoding="utf-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <!--实体色彩-->
  <solid android:color="@color/mainColor"/>

  <!--弧度-->
  <corners android:radius="@dimen/radius"/>

</shape>

@drawable/btn_commit_h

<?xml version="1.0" encoding="utf-8"?>
<shape
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <!--实体色彩-->
  <solid android:color="@color/mainColorH"/>

  <!--弧度-->
  <corners android:radius="@dimen/radius"/>

</shape>

六.用户输入合法性验证

因为在登录注册时,都要把用户填写的数据传送要服务器进行验证,所以假如在客户端先进行用户输入合法性验证,那么就可以削减原先用来传送不合法数据的资源,使得资源利用率更高。

第三方包地址为:https://github.com/Blankj/AndroidUtilCode

由此运用AndroidUtilCode包来进行验证,过程如下

(1) 引进第三方库

在当时模块的build.gradle中引进第三方库

  implementation 'com.blankj:utilcode:1.23.7'

(2)初始化AndroidUtilCode

运用AndroidUtilCode库要先初始化,初始化办法为Utils.init(Application),所以在咱们自界说的Application中初始化

public class MyApplication extends Application {

  @Override
  public void onCreate(){
    super.onCreate();

    //初始化第三方AndroidUtilCode包:Utils.init(application)
    Utils.init(this);
  }
}

(3) 创立静态类办法,用于传入参数进行验证

因为验证手机号输入合法性和暗码合法性是大局运用的办法,所以新创立一个大局静态类,在其间创立静态办法,以供调用验证

public class UserUtils {
  /**
   * 验证登录用户输入的合法性
   */
  public static boolean validateLogin(Context context,String phone,String password){
    //准确地匹配手机号码
    if(!RegexUtils.isMobileExact(phone)){
      Toast.makeText(context,"无效手机号",Toast.LENGTH_SHORT).show();
      return false;
    }
    //验证输入暗码是否为空
    if(TextUtils.isEmpty(password)){
      Toast.makeText(context,"请输入暗码",Toast.LENGTH_SHORT).show();
      return false;
    }

    return true;
  }
}

(4) 验证手机号供给了"简略"和"准确"两种办法

AndroidUtilCode供给的验证手机号码的犯法有两种RegexUtils.isMobileExact()和RegexUtils.isMobileSimple():前者是精准匹配(即承认已发布的码段),而后者是简略匹配(即验证输入手机号是否为1最初且11位),两者首要的差异便是内部调用的正则表达式不同

 

七.Activity过渡动画分类

界说大局动画的过程:

1. 自界说动画

在app/src/main/res/anim(没有便自己创立)下,创立动画

  • open_enter
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <!--平移-->
  <translate
    android:fromXDelta="100%"
    android:toXDelta="0%"
    android:duration="@integer/animation_time"/>
</set>

android:fromXDelta="100%"表明activity的开始方位为最右边,android:toXDelta="0%"表明activity的中止方位为最左面,android:duration为动画时刻,@integer/animation_time为咱们自己在app/src/main/res/values/integers.xml下自界说的变量的

<integer name="animation_time">2000</integer>
  • open_exit

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <!--缩放-->
  <scale
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.8"
    android:toYScale="0.8"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="@integer/animation_time"/>
</set>

android:fromXScale、android:fromYScale为原始尺度Y,android:toXScale、android:toYScale为缩放尺度;android:pivotX,android:pivotY指定缩放中心,这儿指明缩放中心是界面中心

  • close_exit

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <!--平移-->
  <translate
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:duration="@integer/animation_time"/>
</set>
  • close_enter

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <!--缩放-->
  <scale
    android:fromXScale="0.8"
    android:fromYScale="0.8"
    android:toXScale="1.0"
    android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="@integer/animation_time"/>
</set>

2. 界说大局动画的过程: 在app/src/main/res/values/styles.xml界说劝酒大局动画AnimationActivity

(1)翻开Activity时

  • 新进入的Activity履行动画
  • 原activity履行动画

(2)退出Activity时

  • 退出Activity履行动画
  • 从头进入的activity履行动画
<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorStatusBar</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowAnimationStyle">@style/AnimationActivity</item>
  </style>
  
  <!--界说大局动画-->
  <style name="AnimationActivity"  parent="android:style/Animation.Activity">

    <!--翻开Activity时,新进入的Activity履行动画-->
    <item name="android:activityOpenEnterAnimation">@anim/open_enter</item>
    <!--翻开Activity时,退出的Activity履行动画-->
    <item name="android:activityOpenExitAnimation">@anim/open_exit</item>

    <!--退出Activity时,退出Acitivity履行的动画-->
    <item name="android:activityCloseExitAnimation">@anim/close_exit</item>
    <!--退出Activity时,进入的Acitivity履行的动画-->
    <item name="android:activityCloseEnterAnimation">@anim/close_enter</item>
  </style>

 

 
 

本文地址:http://www.anyuan2002.com/a/question/100411.html
Tags: Android 开发 ----UI
修改:vwin网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部