自定义View的尝试-A到Z快速搜索sideBar

开始之前先来一段我觉得写得很好的话,相信自己才能在开发之路越走越远!


很多大神都说自定义View是进阶的必经之路,那么自然是要学习的。

自定义View的实现方式大概可以分为三种:(View这里不做详细介绍:请看文章

1.自绘控件:这个View上所展现的内容全部都是我们自己绘制出来的

2.组合控件:将几个系统原生的控件组合到一起(例子:略)

3.继承控件:只需要去继承一个现有的控件,然后在这个控件上增加一些新的功能,就可以形成一个自定义的控件了(例子:自定义PopupWindow--可扩展操作


这里介绍第一种“自绘控件”,先来个简单的例子了解一下,后面再深入讲解SideBar,效果如下:


1、设置属性在attrs.xml , 定义属性和声明整个样式,控件就叫TestView,可以设置的属性有背景颜色,字体颜色,和文字内容

<declare-styleable name="TestView">
        <attr name="mbackgroundColor" format="color"/>
        <attr name="mtextColor" format="color"/>
        <attr name="mtext" format="string"/>
    </declare-styleable>

2、在布局中使用

<com.example.lanzheng.search.TestView
        android:id="@+id/test"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:mtext="testtesttest"
        app:mbackgroundColor="#00ffbf"
        app:mtextColor="#3900a4"/>

3、自定义View的编写

package com.example.lanzheng.search;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

import com.example.lanzheng.wheeldemo.R;

/**
 * Created by lan.zheng on 2016/8/18.
 */
public class TestView extends View{

    /**
     * 文本的颜色
     */
    private int mTitleTextColor;
    /**
     * 文本的背景颜色
     */
    private int mTitleTextBackground;
    /**
     * 文字
     */
    private String mTitleText;

    //绘制范围
    private Paint mPaint;
    private Rect mBound;
    pub
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义 `sidebar-item`,需要按照以下步骤进行: 1. 在 `NavMenu` 中定义 `sidebar-item` 的模板,可以使用 `template` 或 `slot`。 2. 在 `sidebar-item` 模板内部添加需要自定义的内容。 3. 使用 `item-scope` 作为 `sidebar-item` 模板的参数,可以获取到该 `sidebar-item` 的数据。 4. 使用 `$scopedSlots` 获取 `sidebar-item` 的插槽,并渲染自定义内容。 以下是自定义 `sidebar-item` 的示例代码: ```html <template> <div> <el-nav-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <template v-for="(item, index) in menuList"> <el-submenu v-if="item.children" :index="item.path" :key="index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </template> <el-menu-item v-for="(child, i) in item.children" :index="child.path" :key="i">{{ child.title }}</el-menu-item> </el-submenu> <el-menu-item v-else :index="item.path" :key="index"> <!-- 定义 sidebar-item 的模板 --> <template v-slot:default="itemScope"> <div class="sidebar-item"> <i :class="itemScope.item.icon"></i> <!-- 添加自定义内容 --> <span>{{ itemScope.item.title }}</span> <span class="count">{{ itemScope.item.count }}</span> </div> </template> </el-menu-item> </template> </el-nav-menu> </div> </template> <script> import { mapState } from 'vuex'; export default { name: 'SidebarMenu', data() { return { activeIndex: '', menuList: [ { title: '首页', path: '/', icon: 'iconfont icon-home', }, { title: '文章', path: '/article', icon: 'iconfont icon-article', count: 10, children: [ { title: '技术', path: '/article/tech', }, { title: '生活', path: '/article/life', }, ], }, ], }; }, mounted() { this.activeIndex = this.$route.path; }, methods: { handleSelect(index) { this.activeIndex = index; this.$router.push(index); }, }, computed: { ...mapState(['menu']), }, }; </script> <style> .sidebar-item { display: flex; align-items: center; } .sidebar-item i { font-size: 14px; margin-right: 10px; } .sidebar-item span { font-size: 14px; margin-right: 10px; } .sidebar-item .count { background-color: #f56c6c; color: #fff; font-size: 12px; padding: 0 4px; border-radius: 8px; } </style> ``` 在上面的示例中,我们在 `sidebar-item` 模板中添加了一个计数器,用于显示文章数量。可以看到,我们使用 `itemScope` 获取到了当前 `sidebar-item` 的数据,并使用 `$scopedSlots` 渲染了自定义内容。同时,我们还定义了一些样式,使得自定义内容更加美观。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值