有icon和arrow的自定义控件

本文介绍了如何创建一个自定义控件,该控件结合了ImageView和TextView,旨在简化布局代码。通过在attr.xml中定义自定义属性,并在布局中使用include标签,实现了一个功能简洁、易于使用的组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先上效果图:


我们可以直接在布局中用RelativeLayout将ImageView和TextView包起来。也可以写一个公用的布局,用include标签将布局引入。但是为了减少我们的代码量,使之变得更简单,我们可以写一个自定义控件。如下:

public class TextMoreView extends FrameLayout {
    private TextView mTvDesc;
    private ImageView mIvMore,mIvImage;

    public TextMoreView(Context context,AttributeSet attrs){
        super(context,attrs);
        LayoutInflater.from(context).inflate(R.layout.text_more_layout, this);
        mTvDesc = (TextView) findViewById(R.id.text_more_desc);
        mIvMore = (ImageView) findViewById(R.id.iv_more);
        mIvImage = (ImageView) findViewById(R.id.iv_more_title);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TextMoreView);
        String desc = array.getString(R.styleable.TextMoreView_desc);
        Drawable drawable = array.getDrawable(R.styleable.TextMoreView_image);
        mTvDesc.setText(desc);
        mIvImage.setImageDrawable(drawable);
        array.recycle();
    }

    public void setDescText(String desc){
        mTvDesc.setText(desc);
    }

    public void setImage(Drawable drawable){
        mIvImage.setImageDrawable(drawable);
    }
    public void setImageGone(){
        mIvImage.setVisibility(GONE);
    }

}

R.layout.text_more_layout

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:background="@color/white"
              android:layout_width="match_parent"
              android:layout_height="46dp">
    <ImageView
            android:id="@+id/iv_more_title"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            />
    <TextView
            android:id="@+id/text_more_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/iv_more_title"
            android:text="wodo"
            android:textColor="@color/custom_more_text"
            android:textSize="@dimen/custom_more_view"/>

    <ImageView
            android:id="@+id/iv_more"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:src="@drawable/selector_arrow_right"
            />
    <View
            android:layout_width="match_parent"
            android:layout_height="0.6dp"
            android:layout_alignParentBottom="true"
            android:background="@color/talk_item_divider_line"
            >

    </View>


</RelativeLayout>


R.styleable.TextMoreView

在项目文件res/value下面创建一个attr.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>   
 <declare-styleable name="TextMoreView">
        <attr name="desc" format="string"/>
        <attr name="image" format="reference"></attr>
    </declare-styleable>
</resources>



这里的自定义属性的format,可以有很多种:

    • reference
    • string
    • color
    • dimension
    • boolean
    • integer
    • float
    • fraction
    • enum
    • flag


然后在我们的布局文件中使用的时候

要在跟布局的位置添加以下代码

        xmlns:textMore="http://schemas.android.com/apk/res/com.lzx.iteam"

                    <com.my.widget.TextMoreView
                            android:id="@+id/tm_draft"
                            textMore:desc="草稿箱"
                            textMore:image="@drawable/function_draft"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content">

                    </com.my.widget.TextMoreView>





### UniApp 中实现自定义左上角按钮样式或功能的方法 在 UniApp 开发中,可以通过多种方式来实现自定义左上角按钮的样式功能。以下是详细的解决方案: #### 1. 使用 `onNavigationBarButtonTap` 方法监听顶部按钮点击事件 通过配置 `pages.json` 文件中的 `navigationStyle` 属性为 `"custom"` 来隐藏默认的导航栏,并使用官方支持的 `onNavigationBarButtonTap` 方法监听左侧按钮的点击事件[^5]。 ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "navigationStyle": "custom" } } ``` 随后,在页面的脚本文件中添加如下代码: ```javascript export default { onNavigationBarButtonTap(e) { if (e.index === 0) { // 判断是否为左上角按钮被点击 this.customLeftButtonClick(); } }, methods: { customLeftButtonClick() { uni.showToast({ title: '自定义左上角按钮已触发', icon: 'none' }); } } }; ``` 需要注意的是,部分 Android 设备可能存在兼容性问题,因此建议将回调函数放置于 `methods` 中以提高稳定性。 --- #### 2. 定制化导航栏并完全替换原生左上角按钮 如果希望更灵活地控制左上角按钮的行为与外观,则可以选择引入自定义导航栏组件。这种方式允许开发者自由设计按钮样式及交互逻辑[^3]。 ##### 步骤一:创建自定义导航栏组件 新建一个名为 `customNav.vue` 的组件文件,其结构可参考以下模板: ```vue <template> <view class="nav-bar"> <!-- 左侧区域 --> <view class="left-area" @tap="handleLeftClick"> <image src="/static/icons/back-arrow.png"></image> <!-- 替换为你想要使用的图标 --> </view> <!-- 中间标题 --> <view class="center-title">{{ title }}</view> <!-- 右侧操作区 --> <view class="right-actions"> <slot name="actions"></slot> </view> </view> </template> <script> export default { props: ['title'], methods: { handleLeftClick() { this.$emit('back'); // 向父组件传递返回事件 } } }; </script> <style scoped> .nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #fff; } .left-area image { width: 24px; height: 24px; } .center-title { font-size: 18px; font-weight: bold; } .right-actions { display: flex; gap: 10px; } </style> ``` ##### 步骤二:在目标页面中引用该组件 修改对应页面的 `.vue` 文件,导入上述组件并绑定必要的参数: ```vue <template> <view> <custom-nav :title="'首页'" @back="navigateBack"></custom-nav> <view class="content">这里是主要内容...</view> </view> </template> <script> import CustomNav from '@/components/customNav/customNav'; export default { components: { CustomNav }, methods: { navigateBack() { uni.navigateBack(); // 执行返回动作 } } }; </script> ``` 此方案不仅能够满足个性化需求,还便于统一管理项目内的导航栏风格。 --- #### 3. 结合工具封装通用返回按钮组件 对于频繁涉及返回操作的应用场景而言,还可以进一步抽象出独立的返回按钮组件以便复用[^4]。 示例代码片段如下所示: ```vue <!-- 返回按钮组件 back-button.vue --> <template> <button type="default" size="mini" @click="goBack"> <image src="/static/icons/left-arrow.png" mode="aspectFit"></image> 返回 </button> </template> <script> export default { methods: { goBack() { uni.navigateBack(); } } }; </script> <style scoped> button { display: inline-flex; align-items: center; border-radius: 4px; padding: 6px 12px; margin-left: 10px; } image { width: 16px; height: 16px; margin-right: 4px; } </style> ``` 将其嵌入到任意页面即可快速启用定制化的返回入口。 --- ### 总结 以上介绍了三种主流途径用于解决 UniApp 应用程序内关于如何调整左上角按钮样式的实际开发难题。无论是基于框架内置接口还是借助外部资源构建专属控件,均能有效达成预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值