腾讯QMUI Android框架使用(一)入门及目录
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了腾讯QMUI Android框架使用(一)入门及目录相关的知识，希望对你有一定的参考价值。
参考技术A 把项目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。你可以通过在项目中的 theme 中用
的形式来覆盖 QMUI 组件的默认表现。具体可指定的属性名请参考 @style/QMUI.Compat 中的属性。
对 Button 提供圆角功能，支持以下特性：
1.指定圆角的大小。
2.分别指定不同方向的圆角大小。
3.指定圆角的大小为高度的一半，并跟随高度变化自适应圆角大小。
4.支持分别指定背景色和边框色，指定颜色时支持使用 color 或 ColorStateList。
提供了一系列常用的对话框，解决了使用系统默认对话框时在不同 android 版本上的表现不一致的问题。使用不同的 Builder 来构建不同类型的对话框，这些 Builder 都拥有设置 title 和添加底部按钮的功能，不同的 Builder 特有的作用如下：
1.MessageDialogBuilder: 消息类型的对话框 Builder。通过它可以生成一个带标题、文本消息、按钮的对话框。
2.ConfirmMessageDialogBuilder: 带 Checkbox 的消息确认框 Builder。
3.EditTextDialogBuilder: 带输入框的对话框 Builder。
4.MenuDialogBuilder: 菜单对话框 Builder。
5.CheckableDialogBuilder: 单选类型的对话框 Builder。
6.MultiCheckableDialogBuilder: 多选类型的对话框 Builder。
7.CustomDialogBuilder: 自定义对话框内容区域的 Builder。
8..AutoResizeDialogBuilder: 随键盘升降自动调整 Dialog 高度的 Builder
类似 CSS 里 float: left 的浮动布局，从左到右排列子 View 并自动换行。支持以下特性：
1.控制子 View 之间的垂直/水平间距。
2.控制子 View 的水平对齐方向（左对齐/居中/右对齐）。
3.限制子 View 的个数或行数。
通用的空界面控件，支持显示 loading、主标题和副标题、图片。
用于横向多个 Tab 的布局，包含多个特性：
1.可以用 xml 或 QMUITabSegment 提供的 set 方法统一配置文字颜色、icon 位置、是否要下划线等。
2.每个 Tab 都可以非常灵活的配置，内容上支持文字和 icon 的显示，icon 支持选中态，支持内容的排版对齐方向设置，支持显示红点，3.支持插入自定义的 View，支持监听双击事件等。
4.可以通过 setupWithViewPager(ViewPager) 方法与 ViewPager 绑定。
一个进度条控件，通过颜色变化显示进度，支持环形和矩形两种形式，主要特性如下：
1.支持在进度条中以文字形式显示进度，支持修改文字的颜色和大小。
2.可以通过 xml 属性修改进度背景色，当前进度颜色，进度条尺寸。
3.支持限制进度的最大值。
通用的列表，常用于 App 的设置界面，注意其父类不是 ListView 而是 LinearLayout，所以一般要配合 ScrollView 使用。提供了 Section 的概念，用来将列表分块。 配合 QMUIGroupListView.Section, QMUICommonListItemView 和 QMUIGroupListSectionHeaderFooterView 使用。
提供一个浮层展示在屏幕中间，提供了以下两种样式：
1.使用 QMUITipDialog.Builder 生成，提供了一个图标和一行文字的样式, 其中图标有 Loading、成功、失败等类型可选。
2.使用 QMUITipDialog.CustomBuilder 生成，支持传入自定义的 layoutResId。
提供为图片添加圆角、边框、剪裁到圆形或其他形状等功能。
在 TextView 的基础上支持文字竖排。
下拉刷新控件。支持自定义 RefreshView（表示正在刷新的 View），触发刷新的位置等特性。
提供一个浮层，支持自定义浮层的内容，支持在指定 View 的任一方向旁边展示该浮层，支持自定义浮层出现/消失的动画。
相比 TextView，修正了两个常见问题：
修正了 TextView 与 ClickableSpan 一起使用时，点击 ClickableSpan 也会触发 TextView 的事件的问题。
修正了 TextView 默认情况下如果添加了 ClickableSpan 之后就无法把点击事件传递给 TextView 的 Parent 的问题。
使 TextView 能自动识别 URL、电话、邮箱地址，相比 TextView 有以下特点：
1.可以设置链接的样式。
2.可以设置链接的点击事件。
1.支持显示表情的伪 TextView（继续自定义 View,而不是真正的 TextView), 实现了 TextView 的 maxLine、ellipsize、textSize、textColor 等基本功能。
2.支持与 QMUITouchableSpan 配合使用实现内容可点击。
支持二级结构的列表的折叠与展开；支持滚动时悬浮当前 section header; 支持在section list 或 section item list 前后添加自定义 View。
对 QMUITopBar 的包裹类，并代理了 QMUITopBar 的方法。配合 QMUIWindowInsetLayout 使用，可使 QMUITopBar 在支持沉浸式状态栏的界面中顶部延伸到状态栏。
Android MVVM框架搭建腾讯X5WebView + DrawerLayout + NavigationView
Android MVVM框架搭建（六）腾讯X5WebView + DrawerLayout + NavigationView
前言
在上一篇文章中在HomeActivity中通过装载不同的Fragment显示不同的数据，目前有新闻数据和视频数据，不过光是显示数据，看不到详细内容也不行。其次在这样的页面中要想显示个人信息的话，可以增加一个Fragment或者通过侧滑抽屉来显示，同时既然有个人信息页面，自然就要有登录和注册的关系，之前的登录是个假的，这次我就做的真一点，用一下本地数据库。
效果图
正文
首先我们先显示新闻详情信息。这里会用到WebView，Android原生的WebView好不好用，用过的就不会再用，因此我们用更加好用的WebView，就是腾讯的X5 WebView，你可以看到微信里面也是这个WebView。要使用这个WebView需要添加依赖。
一、添加依赖
在app的build.gradle中的dependencies闭包中添加如下代码：
// 腾讯X5内核WebView
implementation 'com.tencent.tbs:tbssdk:44085'
添加后，点击Sync Now，进行项目同步。
二、使用WebView
下面在Activity中新建一个WebActivity，布局是activity_web.xml，这个类用于装载WebView显示，首先改一下布局activity_web.xml，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activity.WebActivity">
<com.tencent.smtt.sdk.WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
然后在WebActivity中增加如下代码，用于配置WebView。
private final WebViewClient client = new WebViewClient()
/**
* 防止加载网页时调起系统浏览器
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
view.loadUrl(url);
return true;
@Override
public void onReceivedHttpAuthRequest(WebView webview,
com.tencent.smtt.export.external.interfaces.HttpAuthHandler httpAuthHandlerhost, String host,
String realm)
boolean flag = httpAuthHandlerhost.useHttpAuthUsernamePassword();
@Override
public void onPageFinished(WebView webView, String s)
super.onPageFinished(webView, s);
@Override
public void onReceivedError(WebView webView, int i, String s, String s1)
System.out.println("***********onReceivedError ************");
super.onReceivedError(webView, i, s, s1);
@Override
public void onReceivedHttpError(WebView webView, WebResourceRequest webResourceRequest, WebResourceResponse webResourceResponse)
System.out.println("***********onReceivedHttpError ************");
super.onReceivedHttpError(webView, webResourceRequest, webResourceResponse);
;
当前的页面是需要网络请求的，因此就会有相应的ViewModel和Repository，因为聚合给的新闻数据里面有一个uniquekey，用于查询新闻的详情信息，然后再去返回的详情信息里面找到url通过WebView去加载。当然并不是每一条新闻都能够去显示的，有一些新闻是没有详情信息的，这在我们点击新闻的时候就要做处理。
这是我们下面要做的事情，现在对于X5WebView还需要进行一个初始化，这样做是方便使用的。在BaseApplication中增加如下代码：
private void initX5WebView()
HashMap map = new HashMap(2);
map.put(TbsCoreSettings.TBS_SETTINGS_USE_SPEEDY_CLASSLOADER, true);
map.put(TbsCoreSettings.TBS_SETTINGS_USE_DEXLOADER_SERVICE, true);
QbSdk.initTbsSettings(map);
//搜集本地tbs内核信息并上报服务器，服务器返回结果决定使用哪个内核。
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback()
@Override
public void onViewInitFinished(boolean arg0)
//x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
Log.d("app", " onViewInitFinished is " + arg0);
@Override
public void onCoreInitFinished()
;
//x5内核初始化接口
QbSdk.initX5Environment(getApplicationContext(), cb);
然后在onCreate中调用它。
下面关于WebView的使用就只有一步了，那就是加载url，现在还没有的，去获取它。
三、获取新闻详情
在聚合API中获取新闻详情是另一个接口，在写这个接口之前，先写一个返回的新闻详情数据。
① 新闻详情数据
在model包下新增一个NewsDetailResponse类，里面的代码如下：
public class NewsDetailResponse
private String reason;
private ResultBean result;
private Integer error_code;
public String getReason()
return reason;
public void setReason(String reason)
this.reason = reason;
public ResultBean getResult()
return result;
public void setResult(ResultBean result)
this.result = result;
public Integer getError_code()
return error_code;
public void setError_code(Integer error_code)
this.error_code = error_code;
public static class ResultBean
private String uniquekey;
private DetailBean detail;
private String content;
public String getUniquekey()
return uniquekey;
public void setUniquekey(String uniquekey)
this.uniquekey = uniquekey;
public DetailBean getDetail()
return detail;
public void setDetail(DetailBean detail)
this.detail = detail;
public String getContent()
return content;
public void setContent(String content)
this.content = content;
public static class DetailBean
private String title;
private String date;
private String category;
private String author_name;
private String url;
private String thumbnail_pic_s;
private String thumbnail_pic_s02;
private String thumbnail_pic_s03;
public String getTitle()
return title;
public void setTitle(String title)
this.title = title;
public String getDate()
return date;
public void setDate(String date)
this.date = date;
public String getCategory()
return category;
public void setCategory(String category)
this.category = category;
public String getAuthor_name()
return author_name;
public void setAuthor_name(String author_name)
this.author_name = author_name;
public String getUrl()
return url;
public void setUrl(String url)
this.url = url;
public String getThumbnail_pic_s()
return thumbnail_pic_s;
public void setThumbnail_pic_s(String thumbnail_pic_s)
this.thumbnail_pic_s = thumbnail_pic_s;
public String getThumbnail_pic_s02()
return thumbnail_pic_s02;
public void setThumbnail_pic_s02(String thumbnail_pic_s02)
this.thumbnail_pic_s02 = thumbnail_pic_s02;
public String getThumbnail_pic_s03()
return thumbnail_pic_s03;
public void setThumbnail_pic_s03(String thumbnail_pic_s03)
this.thumbnail_pic_s03 = thumbnail_pic_s03;
② 新闻详情数据API
/**
* 聚合新闻数据详情
*/
@GET("/toutiao/content?key=99d3951ed32af2930afd9b38293a08a2")
Observable<NewsDetailResponse> newsDetail(@Query("uniquekey") String uniquekey);
这个接口用于请求新闻详情数据，返回值将会解析成NewsDetailResponse。
③ WebRepository
数据有了，API接口有了，下面就是去调用的地方了，在repository包下新增一个WebRepository类，里面的代码如下：
@SuppressLint("CheckResult")
public class WebRepository
final MutableLiveData<NewsDetailResponse> newsDetail = new MutableLiveData<>();
public final MutableLiveData<String> failed = new MutableLiveData<>();
/**
* 获取新闻详情数据
* @param uniquekey 新闻ID
* @return newsDetail
*/
public MutableLiveData<NewsDetailResponse> getNewsDetail(String uniquekey)
NetworkApi.createService(ApiService.class, 2).
newsDetail(uniquekey).compose(NetworkApi.applySchedulers(new BaseObserver<NewsDetailResponse>()
@Override
public void onSuccess(NewsDetailResponse newsDetailResponse)
if (newsDetailResponse.getError_code() == 0)
newsDetail.setValue(newsDetailResponse);
else
failed.postValue(newsDetailResponse.getReason());
@Override
public void onFailure(Throwable e)
failed.postValue("NewsDetail Error: " + e.toString());
));
return newsDetail;
很简单的代码，和之前的地方基本上没啥差别。
④ WebViewModel
数据获取有了，下面就是通过ViewModel去关联Activity。在viewmodels包下新建一个WebViewModel，里面的代码如下：
public class WebViewModel extends BaseViewModel
public LiveData<NewsDetailResponse> newsDetail;
public void getNewDetail(String uniquekey)
WebRepository webRepository = new WebRepository();
failed = webRepository.failed;
newsDetail = webRepository.getNewsDetail(uniquekey);
下面就是在WebActivity中去观察这个网络返回的数据了。
⑤ 页面数据处理
打开WebActivity，实际上我们只需要修改onCreate中的代码就可以了，代码如下：
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
ActivityWebBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_web);
WebViewModel viewModel = new ViewModelProvider(this).get(WebViewModel.class);
binding.webView.setWebViewClient(client);
setStatusBar(true);
// 在调用TBS初始化、创建WebView之前进行如下配置
String uniquekey = getIntent().getStringExtra("uniquekey");
if (uniquekey != null)
viewModel.getNewDetail(uniquekey);
viewModel.newsDetail.observe(context, newsDetailResponse ->
binding.webView.loadUrl(newsDetailResponse.getResult().getDetail().getUrl()));
viewModel.failed.observe(context, this::showMsg);
这里的代码很常规，首先是绑定布局，然后是ViewModel，再设置webView的配置客户端，设置状态栏，然后就是获取其他页面传递过来的参数，通过这个参数去请求接口，观察返回值，最后加载返回的url。
这里都完成了，下一步就是传递这个参数了，什么时候传递呢？当然是点击的时候了。
四、传递新闻参数
在点击新闻列表中的某一项的时候传递参数到WebActivity中，在NewsAdapter类中添加如下代码：
public static class ClickBinding
public void itemClick(NewsResponse.ResultBean.DataBean dataBean, View view)
if("1".equals(dataBean.getIs_content()))
Intent intent = new Intent(view.getContext(), WebActivity.class);
intent.putExtra("uniquekey", dataBean.getUniquekey());
view.getContext().startActivity(intent);
else
Toast.makeText(view.getContext(), "没有详情信息", Toast.LENGTH_SHORT).show();
当Is_content不为1的时候就表示没有详情信息，则提示一下即可。
然后在convert方法中添加一行代码，如下图所示：
最后就是修改item_newx.xml中的代码了，改动如下图所示：
由于我希望WebView可以沉浸式，因此我在AndroidManifest.xml中对这个WebActivity进行了主题设置，代码如下：
<activity
android:name=".ui.activity.WebActivity"
android:theme="@style/SplashTheme" />
下面就可以运行了。
下面就是点击视频item打开视频的播放地址了。
五、热门视频播放
这里首先要修改视频列表适配器中的内容，打开VideoAdapter，在里面增加如下代码：
public static class ClickBinding
public void itemClick(@NotNull VideoResponse.ResultBean resultBean, View view)
if (resultBean.getShare_url() != null)
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(resultBean.getShare_url())));
else
Toast.makeText(view.getContext(), "视频地址为空", Toast.LENGTH_SHORT).show();
然后convert方法中设置进去。
再修改item_video.xml的代码，如下图所示：
Kevin Learn QMUI--＞qmui 知识梳理
腾讯 Web UI 解决方案 QMUI Web —— 探索与沉淀
腾讯 Web UI 解决方案 QMUI Web —— 探索与沉淀