安卓android-QUMI框架基本控件的简单使用

首先我们来看个效果图

其实这些就是跟系统基本控件差不多，只是QUMI对其进行外观优化，基本用法不变。

接下来看一下代码目录

在接下来我们就看看详细代码。

首先呢，我们需要在配置文件里面加入依赖

然后在style.xml里面将用

activity.xml

接下来写布局文件。

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

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topBar"

        android:layout_width="match_parent"
        android:layout_height="30dp"></com.qmuiteam.qmui.widget.QMUITopBar>


    <com.qmuiteam.qmui.widget.QMUILoadingView
        android:id="@+id/loadView"
        android:layout_width="match_parent"
        android:layout_height="100dp"/>

    <com.qmuiteam.qmui.widget.QMUIProgressBar
        android:id="@+id/progressBar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        app:qmui_stroke_width="15dp"
        app:qmui_background_color="@color/qmui_config_color_10_pure_black"
        app:qmui_progress_color="@color/qmui_config_color_red"
        android:textDirection="firstStrongLtr"
        app:qmui_type="type_circle"/>

    <com.qmuiteam.qmui.widget.QMUIRadiusImageView
        android:id="@+id/iv_image"
        android:src="@drawable/ic_launcher_background"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:id="@+id/btn"
        android:typeface="sans"
        android:text="点击"
        android:textColor="@color/btn_filled_blue_bg_disabled"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

    <com.qmuiteam.qmui.widget.QMUITopBarLayout
        android:id="@+id/barLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


    </com.qmuiteam.qmui.widget.QMUITopBarLayout>

</LinearLayout>

MainActivity.java

package com.diyihang.qmui_practise2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import com.qmuiteam.qmui.widget.QMUITopBar;
import com.qmuiteam.qmui.widget.QMUILoadingView;
import com.qmuiteam.qmui.widget.QMUIProgressBar;
import com.qmuiteam.qmui.widget.QMUIRadiusImageView;
import com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton;
import com.qmuiteam.qmui.widget.QMUITopBarLayout;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        QMUILoadingView loadingView = findViewById(R.id.loadView);
        QMUIProgressBar bar=findViewById(R.id.progressBar);
        QMUIRadiusImageView imageView=findViewById(R.id.iv_image);
        QMUIRoundButton btn=findViewById(R.id.btn);
        QMUITopBar topBar=findViewById(R.id.topBar);
        QMUITopBarLayout barLayout=findViewById(R.id.barLayout);

        loadingView.setVisibility(View.VISIBLE);
        loadingView.setColor(R.color.qmui_config_color_black);
        loadingView.setBackgroundColor(getResources().getColor(R.color.qmui_s_transparent));
        loadingView.setActivated(true);
        loadingView.setSize(100);
        loadingView.start();

        bar.setMaxValue(100);
        bar.setProgress(70);

        imageView.setImageResource(R.drawable.ic_launcher_background);
        imageView.setCircle(true);
        imageView.setCornerRadius(100);
        imageView.setOval(false);//是否椭圆
        imageView.setBorderWidth(10);//设置边缘宽度

        topBar.setTitle("你好");
        topBar.setBackgroundColor(getResources().getColor(R.color.qmui_config_color_10_pure_black));
        topBar.showTitleView(true);
        topBar.addLeftBackImageButton();

        barLayout.setTitle("撒地方");
        barLayout.addLeftTextButton("撒",R.drawable.ic_launcher_background);


    }
}

按着上述步骤去做，就可以实现QUMI控件的基本应用啦，如果想应用于自己的APP中，还需自行优化自适应于自己的APP中。

这个是例子代码链接