/ Draw

The Trapezoid Parts View which draw Trapezoid image

The Trapezoid Parts View which draw Trapezoid image

TrapezoidPartsView

the Trapezoid Parts View which draw Trapezoid image. and event on it.

TrapezoidPartsView

TrapezoidPartsView2

使用


  • Gradle
allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

 implementation 'com.github.LightSun:TrapezoidPartsView:1.0.1'
  • xml中
  <com.heaven7.android.trapezoid.TrapezoidPartsView
        android:id="@+id/tpv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        app:tpv_angle="68"
        app:tpv_image_aspect_ratio="1.848485"
        app:tpv_text_color="@android:color/white"
        app:tpv_text_margin_top="15dp"
        app:tpv_text_margin_bottom="5dp"
        app:tpv_space="16dp"
        app:tpv_text_size="18sp"
        app:tpv_touch_alpha="0.7"
        app:tpv_debug="false"
        />

  • 调用
 @OnClick(R.id.bt1)
    public void onClick(View view){
        List<TrapezoidPartsView.TrapezoidPart> list = createTrapezoidParts();
        mTpv.setParts(list);
    }
    //构造每个梯形部分。  
    private List<TrapezoidPartsView.TrapezoidPart> createTrapezoidParts() {
        List<TrapezoidPartsView.TrapezoidPart> list = new ArrayList<>();
        for (int i = 0; i < mBgIds.length ; i ++){
            TrapezoidPartsView.TrapezoidPart part = new TrapezoidPartsView.TrapezoidPart();
            //设置3个属性,依次是背景,小图标,文本。还有一个方法可设置类型。setType.
            part.setBgIcon(getDrawableBitmap(mBgIds[i]));
            part.setIcon(getResources().getDrawable(mIconIds[i]));
            part.setText(mStrs[i]);
            list.add(part);
        }
        return list;
    }
  • Parcel序列化支持(用于onSaveInstanceState 和onRestoreInstanceState)

    private int[] mBgIds = {
            R.drawable.plan_database_bg,
            R.drawable.plan_music_bg,
            R.drawable.plan_editorz_bg,
    };
    private int[] mIconIds = {
            R.drawable.plan_database,
            R.drawable.plan_music,
            R.drawable.plan_editor,
    };
    private String[] mStrs = {
            "Projects",
            "Music",
            "Edit"
    };
    //因为drawable和bitmap本身不支持序列化。所以需要处理
     mTpv.setTrapezoidPartParcelCallback(new TrapezoidPartsView.TrapezoidPartParcelCallback() {
            @Override
            public void writeToBundle(Context context, Bundle out, int index, TrapezoidPartsView.TrapezoidPart part) {
                out.putInt("bg_id", mBgIds[index]);
                out.putInt("icon_id", mIconIds[index]);
            }
            @Override
            public void readFromBundle(Context context, Bundle in, int index, TrapezoidPartsView.TrapezoidPart part) {
                int bgId = in.getInt("bg_id");
                int iconId = in.getInt("icon_id");
                BitmapDrawable bgDrawable = (BitmapDrawable) context.getResources().getDrawable(bgId);
                Drawable icon = context.getResources().getDrawable(iconId);
                part.setBgIcon(bgDrawable.getBitmap());
                part.setIcon(icon);
            }
        });

自定义属性详解


<declare-styleable name="TrapezoidPartsView">
        <!-- 各个梯形之间的间隙(水平方向) -->
        <attr name="tpv_space" format="dimension|reference"/>
        <!-- 触摸梯形时的透明度。(用于2态效果) -->
        <attr name="tpv_touch_alpha" format="float|reference"/>
        <!-- 文本大小 --> 
        <attr name="tpv_text_size" format="dimension|reference"/>
        <!-- 文本颜色 --> 
        <attr name="tpv_text_color" format="color|reference"/>
        <!-- 文本距离顶部 --> 
        <attr name="tpv_text_margin_top" format="dimension|reference"/>
         <!-- 文本距离底部 --> 
        <attr name="tpv_text_margin_bottom" format="dimension|reference"/>
        <!-- 梯形的角度。用于动态计算梯形高度。使得可以等比缩放 -->
        <attr name="tpv_angle" format="float|reference"/>
        <!-- 梯形背景图的比例。用于等比缩放 -->
        <attr name="tpv_image_aspect_ratio" format="float|reference"/>
        <!-- 是否开启debug模式。debug下只会绘制边框 -->
        <attr name="tpv_debug" format="boolean|reference"/>
    </declare-styleable>

GitHub