style、selector、attrs、shape

1.style:

在res/values下编写,众多属性的集合体,常见写法为:

<span style="font-size:18px;"><style name="MyStyle1" >
        <item name="android:textSize">40sp</item>
        <item name="android:textColor">#000000</item>
        <item name="android:background">#ffff00ff</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_width">100dp</item>
</style></span>


style也可以实现继承

写法一:

<span style="font-size:18px;"><style name="MyStyle2" parent="MyStyle1">
        <item name="android:layout_width">150dp</item>
</style></span>


写法二:
<span style="font-size:18px;"><style name="MyStyle1.quan" >
        <item name="android:layout_width">200dp</item>
</style></span>

也可以实现多继承关系:

<span style="font-size:18px;"><style name="MyStyle1.quan.text" >
        <item name="android:layout_width">250dp</item>
</style></span>


用法:

在布局文件中引用style

<span style="font-size:18px;"><TextView
        android:layout_height="wrap_content"
        style="@style/MyStyle1"
        android:text="quan"
/></span>


ps:style中的属性如果在布局文件中有重新定义,则按照布局文件中的执行,style的子类也一样




2.selector-选择器

android:state_selected选中

android:state_focused获得焦点

android:state_pressed点击

android:state_enabled设置是否响应事件,指所有事件


在res/drawable下创建.xml资源文件

常见写法:

<span style="font-size:18px;"><selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@mipmap/ic_launcher"></item>
    <!-- 默认图片 -->
    <item android:drawable="@mipmap/ic_launcher"></item>

    <item android:state_pressed="true" android:color="#fff"></item>
    <!-- 默认颜色 -->
    <item android:color="#000fff"></item>

    <item android:state_pressed="true" >
        <shape >
            <gradient android:startColor="#eac100"/>
            <gradient android:endColor="#ffffff"/>
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector></span>


用法:

<span style="font-size:18px;"><ImageButton
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/my_selector"/></span>



3.attrs

在res/values下创建.xml文件

写法为:

<span style="font-size:18px;"><resources>
    <declare-styleable name="quan">
        <attr name="my_textsize" format="string|reference"/><!-- reference参考某一资源ID-->
        <attr name="my_textcolor" format="color|reference"/>
    </declare-styleable>
</resources></span>


一般情况下attrs.xml在自定义view/控件时使用,与TypedArray配合使用,其在自定义view中使用的java代码为:

<span style="font-size:18px;">public TitleBar(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
			TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);
			mTitleText = ta.getString(R.styleable.TitleBar_title_text);
			mTitleTextSize = ta.getDimension(R.styleable.TitleBar_title_text_size, 16);
			mTitleTextColor = ta.getColor(R.styleable.TitleBar_title_text_color, Color.parseColor("#ffffff"));
			mIndicatorDrawable = ta.getDrawable(R.styleable.TitleBar_indicator_image_drawable);
			mIndicatorVisibility = ta.getBoolean(R.styleable.TitleBar_show_indicator, false);
			ta.recycle();
		}</span>


然后在布局文件中.xml中的写法为1.先声明命名空间,2.命名空间名.方法 来 使用,代码为:

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:quan="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".PublishActivity" >

    <com.example.admin.myselfview_2.TitleBar
        android:id="@+id/tb_title_bar"
        quan:title_text="主题列表"
        quan:show_indicator="true"
        quan:indicator_image_drawable="@mipmap/ic_launcher"
        style="@style/TitleBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.example.admin.myselfview_2.TitleBar>

</RelativeLayout></span>



4.shape

在res/drawable下建立.xml文件

常见属性:

soild:填充/填充的背景颜色
gradient:渐变/android:startColor和android:startColor表示起始颜色和结束颜色
                        android:angle 渐变角度,默认是从左到右的渐变方向,值为45的整数倍,
                                        例如android:angle="90",表示从下到上渐变,180则是从右到左,按逆时针转动
                        android:type="linear"默认模式-线性渐变,android:type="radial"径向渐变(径向渐变就是从中心
                                         往外延伸的渐变),设置径向渐变还需要指定android:gradientRadius="50",其指定
                                         往外扩散渐变的半径范围
stroke:描边/android:width,表示描边的宽度
              android:color,表示描边的颜色
              android:dashWidth,虚线的线条宽度
              android:dashGap,虚线每一个线段之间的间隔
corners:圆角/android:radius,角的弧度,值越就角圆
               还可以单独设置四个角:android:topLeftRadius...
padding:间隔/与布局的padding类似,可单独设置四个方向


写法:

<span style="font-size:18px;"><shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#000000" android:endColor="#ffffff"
        android:type="radial" android:gradientRadius="50dp"></gradient>
    <!--<solid android:color="#ff00ff"></solid>
     solid 与 gradient不可同时用,gradient会被覆盖-->
    <stroke android:color="#ff0000" android:width="2dp"></stroke>
    <corners android:radius="20dp"></corners>
    <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp"></padding>
</shape></span>


也可以与selector配合使用,如selector中的事例,也可以引用,如:

<span style="font-size:18px;"><selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/press_button" android:state_pressed="true"></item>
    <item android:drawable="@drawable/no_press_button"></item>
</selector></span>


用法:

直接调用即可。

<span style="font-size:18px;"><Button
        android:id="@+id/my_bt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="quan"
        android:background="@drawable/press_selector"
        /></span>




差不多就这么多了,如果有错和不完整的,等发现了再补充上。。。







import { Graph, Shape } from '@antv/x6' import { Stencil } from '@antv/x6-plugin-stencil' import { Transform } from '@antv/x6-plugin-transform' import { Selection } from '@antv/x6-plugin-selection' import { Snapline } from '@antv/x6-plugin-snapline' import { Keyboard } from '@antv/x6-plugin-keyboard' import { Clipboard } from '@antv/x6-plugin-clipboard' import { History } from '@antv/x6-plugin-history' import insertCss from 'insert-css' // 为了协助代码演示 preWork() // #region 初始化画布 const graph = new Graph({ container: document.getElementById('graph-container')!, grid: true, mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: 'ctrl', minScale: 0.5, maxScale: 3, }, connecting: { router: 'manhattan', connector: { name: 'rounded', args: { radius: 8, }, }, anchor: 'center', connectionPoint: 'anchor', allowBlank: false, snap: { radius: 20, }, createEdge() { return new Shape.Edge({ attrs: { line: { stroke: '#A2B1C3', strokeWidth: 2, targetMarker: { name: 'block', width: 12, height: 8, }, }, }, zIndex: 0, }) }, validateConnection({ targetMagnet }) { return !!targetMagnet }, }, highlighting: { magnetAdsorbed: { name: 'stroke', args: { attrs: { fill: '#5F95FF', stroke: '#5F95FF', }, }, }, }, }) // #endregion // #region 使用插件 graph .use( new Transform({ resizing: true, rotating: true, }), ) .use( new Selection({ rubberband: true, showNodeSelectionBox: true, }), ) .use(new Snapline()) .use(new Keyboard()) .use(new Clipboard()) .use(new History()) // #endregion // #region 初始化 stencil const stencil = new Stencil({ title: '流程图', target: graph, stencilGraphWidth: 200, stencilGraphHeight: 180, collapsable: true, groups: [ { title: '基础流程图', name: 'group1', }, { title: '系统设计图', name: 'group2', graphHeight: 250, layoutOptions: { rowHeight: 70, }, }, ], layoutOptions: { columns: 2, columnWidth: 80, rowHeight: 55, }, }) document.getElementById('stencil')!.appendChild(stencil.container) // #endregion // #region 快捷键与事件 graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = graph.getSelectedCells() if (cells.length) { graph.copy(cells) } return false }) graph.bindKey(['meta+x', 'ctrl+x'], () => { const cells = graph.getSelectedCells() if (cells.length) { graph.cut(cells) } return false }) graph.bindKey(['meta+v', 'ctrl+v'], () => { if (!graph.isClipboardEmpty()) { const cells = graph.paste({ offset: 32 }) graph.cleanSelection() graph.select(cells) } return false }) // undo redo graph.bindKey(['meta+z', 'ctrl+z'], () => { if (graph.canUndo()) { graph.undo() } return false }) graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => { if (graph.canRedo()) { graph.redo() } return false }) // select all graph.bindKey(['meta+a', 'ctrl+a'], () => { const nodes = graph.getNodes() if (nodes) { graph.select(nodes) } }) // delete graph.bindKey('backspace', () => { const cells = graph.getSelectedCells() if (cells.length) { graph.removeCells(cells) } }) // zoom graph.bindKey(['ctrl+1', 'meta+1'], () => { const zoom = graph.zoom() if (zoom < 1.5) { graph.zoom(0.1) } }) graph.bindKey(['ctrl+2', 'meta+2'], () => { const zoom = graph.zoom() if (zoom > 0.5) { graph.zoom(-0.1) } }) // 控制连接桩显示/隐藏 const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => { for (let i = 0, len = ports.length; i < len; i += 1) { ports[i].style.visibility = show ? 'visible' : 'hidden' } } graph.on('node:mouseenter', () => { const container = document.getElementById('graph-container')! const ports = container.querySelectorAll( '.x6-port-body', ) as NodeListOf<SVGElement> showPorts(ports, true) }) graph.on('node:mouseleave', () => { const container = document.getElementById('graph-container')! const ports = container.querySelectorAll( '.x6-port-body', ) as NodeListOf<SVGElement> showPorts(ports, false) }) // #endregion // #region 初始化图形 const ports = { groups: { top: { position: 'top', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden', }, }, }, }, right: { position: 'right', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden', }, }, }, }, bottom: { position: 'bottom', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden', }, }, }, }, left: { position: 'left', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden', }, }, }, }, }, items: [ { group: 'top', }, { group: 'right', }, { group: 'bottom', }, { group: 'left', }, ], } Graph.registerNode( 'custom-rect', { inherit: 'rect', width: 66, height: 36, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', }, text: { fontSize: 12, fill: '#262626', }, }, ports: { ...ports }, }, true, ) Graph.registerNode( 'custom-polygon', { inherit: 'polygon', width: 66, height: 36, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', }, text: { fontSize: 12, fill: '#262626', }, }, ports: { ...ports, items: [ { group: 'top', }, { group: 'bottom', }, ], }, }, true, ) Graph.registerNode( 'custom-circle', { inherit: 'circle', width: 45, height: 45, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF', }, text: { fontSize: 12, fill: '#262626', }, }, ports: { ...ports }, }, true, ) Graph.registerNode( 'custom-image', { inherit: 'rect', width: 52, height: 52, markup: [ { tagName: 'rect', selector: 'body', }, { tagName: 'image', }, { tagName: 'text', selector: 'label', }, ], attrs: { body: { stroke: '#5F95FF', fill: '#5F95FF', }, image: { width: 26, height: 26, refX: 13, refY: 16, }, label: { refX: 3, refY: 2, textAnchor: 'left', textVerticalAnchor: 'top', fontSize: 12, fill: '#fff', }, }, ports: { ...ports }, }, true, ) const r1 = graph.createNode({ shape: 'custom-rect', label: '开始', attrs: { body: { rx: 20, ry: 26, }, }, }) const r2 = graph.createNode({ shape: 'custom-rect', label: '过程', }) const r3 = graph.createNode({ shape: 'custom-rect', attrs: { body: { rx: 6, ry: 6, }, }, label: '可选过程', }) const r4 = graph.createNode({ shape: 'custom-polygon', attrs: { body: { refPoints: '0,10 10,0 20,10 10,20', }, }, label: '决策', }) const r5 = graph.createNode({ shape: 'custom-polygon', attrs: { body: { refPoints: '10,0 40,0 30,20 0,20', }, }, label: '数据', }) const r6 = graph.createNode({ shape: 'custom-circle', label: '连接', }) stencil.load([r1, r2, r3, r4, r5, r6], 'group1') const imageShapes = [ { label: 'Client', image: 'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg', }, { label: 'Http', image: 'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg', }, { label: 'Api', image: 'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg', }, { label: 'Sql', image: 'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg', }, { label: 'Clound', image: 'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg', }, { label: 'Mq', image: 'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg', }, ] const imageNodes = imageShapes.map((item) => graph.createNode({ shape: 'custom-image', label: item.label, attrs: { image: { 'xlink:href': item.image, }, }, }), ) stencil.load(imageNodes, 'group2') // #endregion function preWork() { // 这里协助演示的代码,在实际项目中根据实际情况进行调整 const container = document.getElementById('container')! const stencilContainer = document.createElement('div') stencilContainer.id = 'stencil' const graphContainer = document.createElement('div') graphContainer.id = 'graph-container' container.appendChild(stencilContainer) container.appendChild(graphContainer) insertCss(` #container { display: flex; border: 1px solid #dfe3e8; } #stencil { width: 180px; height: 100%; position: relative; border-right: 1px solid #dfe3e8; } #graph-container { width: calc(100% - 180px); height: 100%; } .x6-widget-stencil { background-color: #fff; } .x6-widget-stencil-title { background-color: #fff; } .x6-widget-stencil-group-title { background-color: #fff !important; } .x6-widget-transform { margin: -1px 0 0 -1px; padding: 0px; border: 1px solid #239edd; } .x6-widget-transform > div { border: 1px solid #239edd; } .x6-widget-transform > div:hover { background-color: #3dafe4; } .x6-widget-transform-active-handle { background-color: #3dafe4; } .x6-widget-transform-resize { border-radius: 0; } .x6-widget-selection-inner { border: 1px solid #239edd; } .x6-widget-selection-box { opacity: 0; } `) } 将这段anvt x6流程图的官方代码,转换成html文件,需要的文件以cdn引入的方式加载,确保每个功能正常使用
最新发布
11-12
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值