【Android Studio】XUI框架的使用記錄:源代碼Demo安裝+從Demo中獲取捷徑快速開發自己的APP

0 運行GitHub上的XUI的源代碼

下載GitHub上的XUI源碼並解壓縮到當前文件夾後,用Android Studio打開該項目,開始了一系列的運作,後來報錯,不用管它,關閉AS,重新打開,大部分都是因爲網絡問題導致有些包沒有下好,重複兩次就好了。

不過出現了下面的報警信息時:

[TAG] Failed to resolve variable '${junit.version}'
[TAG] Failed to resolve variable '${animal.sniffer.version}'

解決辦法如下

  1. 首先:File----> Invalidate Caches/ Restart ---->點擊Invalidate Caches/ Restart 重啓Android Studio
  2. 然後:Build---->Clean Project
  3. 最後:安裝到手機上

解決後,安裝到手機上,體驗一下這個功能豐富的Demo。

下面開始從這個Demo中獲取需要的內容。

1 新建項目與添加依賴

1.1 新建項目(空項目)

New project ------> Empty Activity ------> 起名XUITest,編程語言java ------> finish。

1.2 添加Gradle依賴

1.2.1 根目錄的 build.gradle 的 repositories

將左側從默認的Android目錄改爲Project目錄,在項目根目錄的build.gradlerepositories中添加:

allprojects {
     repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

修改完成後,根目錄的build.gradlerepositories完整內容如下:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        google()
        jcenter()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" } //只添加了這麼一句
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

1.2.2 app中的 build.gradle 的 dependencies

打開app中的build.gradledependencies添加:

dependencies {
  ...
  //androidx項目
  implementation 'com.github.xuexiangjys:XUI:1.1.3'

  implementation 'androidx.appcompat:appcompat:1.1.0'
  implementation 'androidx.recyclerview:recyclerview:1.1.0'
  implementation 'com.google.android.material:material:1.1.0-beta01'
  implementation 'com.github.bumptech.glide:glide:4.11.0'
}

【注意】如果你的項目目前還未使用androidx,請使用如下配置:

dependencies {
  ...
  //support項目
  implementation 'com.github.xuexiangjys:XUI:1.0.9-support'

  implementation 'com.android.support:appcompat-v7:28.0.0'
  implementation 'com.android.support:recyclerview-v7:28.0.0'
  implementation 'com.android.support:design:28.0.0'
  implementation 'com.github.bumptech.glide:glide:4.8.0'
}

判斷是否使用了androidx的方法如下:
如果原來的dependencies中帶着類似androidx.的東西,就說明用的是androidx

androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

搞定後,app中的 build.gradle完整的版本:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"
    defaultConfig {
        applicationId "com.example.xuitest"
        minSdkVersion 17
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //androidx項目
    implementation 'com.github.xuexiangjys:XUI:1.1.3'

    //implementation 'androidx.appcompat:appcompat:1.1.0'   與上面重複了
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'com.google.android.material:material:1.1.0-beta01'
    implementation 'com.github.bumptech.glide:glide:4.11.0' 
}

1.2.3 報錯與解決

報錯信息:
ERROR: Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 17 declared in library
解決:
將當前項目的所支持的最小SDK版本改爲17即可。具體做法爲:打開app中的build.gradle,將裏面的minSdkVersion 15改成minSdkVersion 17

2 初始化XUI設置

2.1 在Application最頂部初始化設置(必須)

左側目錄切換回Android目錄,在app下的新建一個java類,如下圖所示:
在這裏插入圖片描述
建好後,MyApp.java內容如下:

package com.example.xuitest;

import android.app.Application;

public class MyApp extends Application {

}

定義一個onCreate方法,進行如下初始化:

XUI.init(this); //初始化UI框架
XUI.debug(true);  //開啓UI框架調試日誌

完成後,整個MyApp.java內容如下:

package com.example.xuitest;

import android.app.Application;

import com.xuexiang.xui.XUI;

public class MyApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        XUI.init(this); //初始化UI框架
        XUI.debug(true);  //開啓UI框架調試日誌
    }
}

然後,需要去manifest文件夾下的AndroidManifestx.xml中添加配置:

android:name=".MyApp"

完成後,整個AndroidManifestx.xml配置文件:

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

    <application
        android:name=".MyApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2.2 調整應用的基礎主題(必須)

必須設置應用的基礎主題,否則組件將無法正常使用!必須保證所有用到XUI組件的窗口的主題都爲XUITheme的子類,這非常重要!!!

基礎主題類型:

大平板(10英寸, 240dpi, 1920*1200):XUITheme.Tablet.Big

小平板(7英寸, 320dpi, 1920*1200):XUITheme.Tablet.Small

手機(4.5英寸, 320dpi, 720*1280):XUITheme.Phone

從這個AndroidManifestx.xml的下述位置找到styles.xml,並將主題替換成想要的主題:
在這裏插入圖片描述
在這裏插入圖片描述
替換完成後,將裏面的那些零碎刪除,完成後整個styles.xml內容爲:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="XUITheme.Phone">

    </style>

</resources>

當然也可以在Activity剛開始時調用如下代碼動態設置主題(此處暫時不管):

@Override
protected void onCreate(Bundle savedInstanceState) {
    XUI.initTheme(this);
    super.onCreate(savedInstanceState);
    ...
}

2.3 調整字體庫(對字體無要求的可省略)

(步驟1)設置你需要修改的字體庫路徑(assets下)

//設置默認字體爲華文行楷,這裏寫你的字體庫
XUI.getInstance().initFontStyle("fonts/hwxk.ttf");

(步驟2)在項目的基礎Activity中加入如下代碼注入字體

@Override
protected void attachBaseContext(Context newBase) {
    //注入字體
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

2.4 混淆配置

-keep class com.xuexiang.xui.widget.edittext.materialedittext.** { *; }

3 寫個按鈕實現一些彈窗功能

最終功能如下,一個按鈕,按了彈出提示彈窗:
在這裏插入圖片描述
爲了實現上述簡單功能,所有需要修改的內容,以及修改後的結果如下。

(1)activity_main.xml中內容:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_test"
        style="@style/Button.Blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="彈窗"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

(2)MainActivity.java中內容:

package com.example.xuitest;

import androidx.appcompat.app.AppCompatActivity;

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

import com.xuexiang.xui.widget.dialog.materialdialog.MaterialDialog;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

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

        findViewById(R.id.btn_test).setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        new MaterialDialog.Builder(this)
                .iconRes(R.drawable.icon_tip)
                .title(R.string.tip_infos)
                .content(R.string.content_simple_confirm_dialog)
                .positiveText(R.string.lab_submit)
                .show();
    }
}

(3)需要拷貝icon_tip.png圖片到drawable文件夾:
在這裏插入圖片描述
(4)需要在app/res/values/string.xml添加內容,完成後,完整的文件如下:

<resources>
    <string name="app_name">XUITest</string>


    <!--MaterialDialog-->
    <string name="tip_bluetooth_permission">是否允許打開藍牙?</string>
    <string name="lab_yes"></string>
    <string name="lab_no"></string>
    <string name="tip_infos">提示</string>
    <string name="content_simple_confirm_dialog">請注意,這是一個簡單的提示性對話框!</string>
    <string name="lab_submit">確定</string>
    <string name="tip_warning">警告</string>
    <string name="content_warning">當前爲開發環境,是否切換到真實環境?</string>
    <string name="lab_change">切換</string>
    <string name="lab_continue">繼續</string>
    <string name="hint_please_input_password">請輸入密碼</string>
    <string name="tip_options">選項</string>
    <string name="tip_router_setting">路線設置</string>
    <string name="lab_choice">選擇</string>
    <string name="tip_update">版本更新</string>
    <string name="content_downloading">正在下載中,請稍後...</string>
    <string name="tip_download_finished">下載完畢!</string>
    <string name="lab_cancel">取消</string>
    <string name="content_wait_for_receive_data">數據接收中,請稍後...</string>
    <string name="lab_edit">編輯</string>
    <string name="lab_add">添加</string>
    <string name="lab_delete">刪除</string>
    <string name="lab_update">更新</string>
    <string name="tip_please_select_transfer_type">選擇一種切換方式</string>
    <string name="tip_signature">簽名</string>
    <string name="lab_clear">清除</string>
    <string name="tip_loading_message">正在加載數據...</string>
    <string name="tip_start">開始</string>
    <string name="tip_stop">停止</string>

</resources>

參考大佬的鏈接都在這了:
GitHub:XUI源碼
Bilibili:XUI基礎入門
Bilibili:在項目中使用XUI
Bilibili:使用模板工程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章