Skip to content

Latest commit

 

History

History
448 lines (320 loc) · 15.6 KB

Document.md

File metadata and controls

448 lines (320 loc) · 15.6 KB
Raw

Document | 文档

Orient-Ui is a Android Ui Library,it includes StatusView,TimeLine,GridPage And DoubleSideLayout now.

Orient-UI 是一个Android Ui库，它现在主要包括状态视图、时间轴、网格首页和两侧布局。

First Step | 第一步

Add Dependency in build.gradle:

在项目文件build.gradle添加依赖

// 注意是否是最新版本
implementation 'com.orient:Orient-Ui:2.1.0'

DoubleSideLayout | 两侧布局

DoubleSideLayout is one of LayoutManager in RecyclerView, so it bases on RecyclerView.

DoubleSideLayout是RecyclerView中的LayoutManager，所以它需要在项目中使用RecyclerView。

Use | 使用

You should assign start side when you create DoubleSideLayoutManager,Left or Right Side.

你应该指定布局开始的一侧当你创建DoubleSideLayoutManager的时候，左边或者右边。

mRecyclerView.setLayoutManager(new DoubleSideLayoutManager(DoubleSideLayoutManager.START_LEFT));

TimeLine | 时间轴

TimeLine is different form other kind of TimeLine,the style of TimeLine is decided by yourself! it bases on ItemDecoration of ReccylelrView.

不同于其他样式的时间轴，TimeLine的样式由你决定！它基于RecyclerView中的ItemDecoration。

Use | 使用

you can choose:

name chooice
TimeLineStyle DoubleTimeLine, SingleTimeLine
LineStyle Divide, Consistant, BeginToEnd(like Consistant)
DotStyle Draw, Resource
TitleStyle Left, Top

Hint: DoubleTimeLine only support Bold part.

提示：DoubleTimeLine仅支持上述加粗部分。

# DoubleTimeLine

e.g: TimeLineStyle-DoubleTimeLine; LineStyle-BeginToEnd; DotStyle-Resource; TitleStyle-Left;

举个例子：完成一个TimeLineStyle-DoubleTimeLine; LineStyle-BeginToEnd; DotStyle-Resource; TitleStyle-Left;的时间轴

S90929-10290486

  1. The data must implement ITimeItem interface | 数据必须继承ITimeItem 接口
public interface ITimeItem {
	// the title you want to show
	String getTitle();
	// dot color
	int getColor();
	// or dot resource
	int getResource();
}
  1. Create your TimeLine extends DoubleTimeLineDecoration | 创建你自己的TimeLine并继承 DoubleTimeLineDecoration
public class WeekPlanDTL extends DoubleTimeLineDecoration {

    public WeekPlanDTL(Config config) {
        super(config);
    }

    @Override
    protected void onDrawTitleItem(Canvas canvas, int left, int top, int right, int bottom, int centerX, int pos, boolean isLeft) {
        // Draw your title part
        // ...
    }

    @Override
    protected void onDrawDotResItem(Canvas canvas, int cx, int cy, int radius, Drawable drawable, int pos) {
        super.onDrawDotResItem(canvas, cx, cy, radius, drawable, pos);
        // draw your dot part
        // ...
    }
}
  1. Add to RecyclerView and set data | 添加进RecyclerView然后设置数据
private TimeLine provideTimeLine(List<TimeItem> timeItems) {
	return new TimeLine.Builder(getContext(), timeItems)
	                .setTitle(Color.parseColor("#8d9ca9"), 14)
	                .setTitleStyle(TimeLine.FLAG_TITLE_TYPE_LEFT, 0)
	                .setLine(TimeLine.FLAG_LINE_BEGIN_TO_END, 60, Color.parseColor("#757575"),3)
	                .setDot(TimeLine.FLAG_DOT_RES)
	                .build(WeekPlanDTL.class);
}

// when using DoubleTimeLine
// RecyclerView must use DoubleSideLayoutManager
mRecyclerView.setLayoutManager(new DoubleSideLayoutManager(DoubleSideLayoutManager.START_LEFT));
TimeLine timeLine = provideTimeLine(timeItems);
mRecyclerView.addItemDecoration(timeLine);
  1. Update TimeLine when data updates, TimeLine provides Add, Update And Remve | 当数据更新的时候记得更新TimeLine，TimeLIne提供了增加，更新和移除的接口。

# SingleTimeLine

e.g: TimeLineStyle-SingleTimeLine; LineStyle-Divide; DotStyle-Draw; TitleSytle-Top

举个例子：完成一个TimeLineStyle-SingleTimeLine; LineStyle-Divide; DotStyle-Draw; TitleSytle-Top;的时间轴

S90929-10290486

The main difference between SingleTimeLine and DoubleTimeLine is parent class, SingleTimeLine should extends SingleTimeLineDecoration. Otherwise, when we use RecyclerView, SingleTimeLine should use LinearLayoutManager, and DoubleTimeLine should use DoubleSideLayoutManager。

主要的区别是SingleTimeLine 和 DoubleTimeLine的父类不同，SingleTimeLine应该继承SingleTimeLineDecoration。除此以外，SingleTimeLine对应着的RecyclerView布局是LinearLayoutManager（线性布局），而 DoubleTimeLine对应着DoubleSideLayoutManager。

StatusView | 状态视图

StatusView is used to express data's diffrent status, such as Error, Null, Loading and Data Show.

状态视图用来表达数据的不同状态，例如错误、空、加载和展示数据。

S90929-10290486

Use | 使用

  1. add in xml | 添加进xml文件中

some attr in StatusView

StatusView中的一些属性

attr explanation
comEmptyText The text display in null status
comErrorText The text displays in error status
comLoadingText The text displays in loading status
comLoadingColor The loading view's color
comEmptyDrawable The drawable displays in null status
comErrorDrawable The drawable displays in errr status

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=".ui.activity.placeholder.PlaceHolderActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:background="@color/teal_300"
        app:navigationIcon="@drawable/common_ic_back"
        android:layout_height="@dimen/len_52"/>

    <!-- Data View'visibility should be gone  -->
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello,World!"
        android:textColor="@color/textPrimary"
        android:textSize="@dimen/font_20"
        android:textStyle="bold"
        android:gravity="center"
        android:visibility="gone"/>

    <com.orient.me.widget.placeholder.StatusView
        android:id="@+id/et_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>
  1. Get EmptyView and Bind data View | 获取EmptyView然后绑定数据视图
// use ButterKnife
@BindView(R.id.tv_name)
TextView mContent;
@BindView(R.id.et_content)
EmptyView mEmptyView;

protected void initWidget() {
	super.initWidget();
	
	mEmptyView.bind(mContent);
}
  1. Change Status | 切换状态
// change loading status
mEmptyView.triggerLoading();
// change show data status
mEmptyView.triggerOk();
// change error status or use mEmptyView.triggerNetError();
mEmptyView.triggerError(R.string.prompt_error);
// change null status
mEmptyView.triggerEmpty();

TableView | 表格

TableView is used to create table，it bases on RecyclerView.

TableView 用来构建二维表格，基于RecyclerView。

Use | 使用

  1. Add to xml | 在xml文件中添加
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.fragment.table.TableFragment">

    <com.orient.me.widget.rv.adapter.TableView
        android:id="@+id/tb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>
  1. Get View | 获取控件

In order to make sure every cell item in same width/height(A itemView can use muti cell item) ，you can choose two different way，one is set detail width/height to cell item, the other is set number which parent height/width can contain max number of cell item。

为了确保每个单元格拥有同样的高宽，你可以使用两种方式，一、给单元格设置具体的宽\高，二、设置父布局的宽\高可容纳单元格的数量。

Some important functions in TableView

在TableView中的一些重要方法

fun desc
setTitle(boolean isLeftOpen, boolean isTopOpen) set whether if show title or not, if isLeftOpen is fasle, left title's Visiblity is gone。
setModeAndValue(int mode, int w, int h) see the following

all mode in function setModeAndValue(int mode, int w, int h):

mode kind w h
TableLayoutManager.MODE_A width = parentWidth/number，w is number height = parentHeight/number，h is number
TableLayoutManager.MODE_B w = detail cell item width h = detail cell item height
TableLayoutManager.MODE_C width = parentWidth/number，w is number h = detail cell item height
TableLayoutManager.MODE_D w = detail cell item width height = parentHeight/number，h is number

code | 代码

// Use ButterKnife
@BindView(R.id.tb)
TableView mTable;

// necessary
mTable.setModeAndValue(TableLayoutManager.MODE_A, 6, 8);
  1. Create Data | 创建数据

implement interface ICellItem，you should provide start row/col and width/height span，what is width span , if width span is 2, it means itemView's width = 2 * cell item width.

实现ICellItem接口，你需要提供其实的行和列，以及长/宽所占单元格的数量

public class TableCell implements ICellItem {

    private String name;
    private String value;
    private int type;
    private int row;
    private int col;
    private int widthSpan;
    private int heightSpan;

    // ...

    @Override
    public int getRow() {
        return row;
    }

    @Override
    public int getCol() {
        return col;
    }

    @Override
    public int getWidthSpan() {
        return widthSpan;
    }

    @Override
    public int getHeightSpan() {
        return heightSpan;
    }
}
  1. set Adapter | 设置适配器

Create Adapter class extends TableAdapter, see in the demo, it is similar to RecyclerView Adapter。

创建类继承TableAdapter，设置适配器详见Demo，类似于RecyclerView的适配器

  1. remeasure | 重新测量

if you use Mode_A、Mode_C or Mode_D, you need remeasure

如果你使用的是Mode_A、Mode_C 或者 Mode_D，你需要重新测量

mTable.post(() -> mTable.reMeasure());

MultiSwitch | 多状态切换按钮

MultiSwitch can support multi-item and icon.

MultiSwitch 支持多个子选项，并且支持图标。

Use | 使用

  1. Add in xml | 添加进xml布局文件
<com.orient.me.widget.sw.MultiSwitch
    android:id="@+id/ms_weak"
    android:layout_width="match_parent"
    android:layout_marginStart="@dimen/len_10"
    android:layout_marginEnd="@dimen/len_10"
    android:layout_height="60dp"
    android:layout_gravity="center"
    android:layout_marginTop="@dimen/len_20"
    app:msBackgroundColor="@color/teal_300"
    app:msTextSize="@dimen/font_18"
    app:msNormalTextColor="@color/white_alpha_192"
    app:msShape="rect"
    app:msThumbColor="@color/white"
    app:msThumbMargin="@dimen/len_6"
    app:msThumbTextColor="@color/teal_300"
    app:msType="text" />

解释一下各个属性的用法：

属性 说明 类型
msBackgroundColor 背景颜色 reference|color
msNormalTextColor 非选中状态文本或者Icon颜色 reference|color
msThumbTextColor 滑块中文本或者Icon颜色 reference|color
msTextSize 文本大小 reference|dimension
msIconSize 图标大小 reference|dimension
msThumbMargin 滑块的外边距 reference|dimension
msShape 选择的形状 rect or oval
msType 选择的类型 text or icon
msThumbColor 滑块背景色 reference
  1. Get MultiSwitch | 获取MultiSwitch

use findViewById get MultiSwitch

使用findViewById获取

  1. Set Items（necessary） | 设置选项内容

set String Array or Icon Array

设置字符串数组或者Icon数组

mHead.setItemsArray(new String[]{"Dark","Light"});
// or
mIconSwitch.setIconArray(new int[]{R.drawable.grid_ic_play,R.drawable.ic_camera,R.drawable.common_ic_back});
  1. Set Linstener | 设置监听器
mHead.setMultiSwitchListener(new MultiSwitchListener() {
    @Override
    public void onPositionSelected(int pos) {
        // when pos selected, it will call back
    }

    @Override
    public void onPositionOffsetPercent(int pos, float percent) {
        // current page move offset percent when drag
    }
});

GridPage | 网格首页

GridPage is used to create HomePage and reduce nest, it should be Used with RecyclerView and GridLayoutManager, GridPage is normal ItemDecoration, it only provide a way to create homepage and reduce nest.

GridPage 用来构建一个首页，优点是减少嵌套，它需要组合RecyclerView和GridLayoutManager，GridPage是普通的，它仅仅为我们提供了一种减少嵌套创建首页的思路。

GridPage

Use | 使用

see demo

详见Demo