SideBar

本文介绍了一种基于Android的侧边栏触摸反馈机制的实现方法。通过自定义View组件并利用触摸事件,实现了字母导航的功能,并展示了如何响应用户的触摸操作来显示相应的字母。

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

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.x6.sidebardemo.MainActivity">

    <com.example.x6.sidebardemo.SideBar
        android:id="@+id/slidBar"
        android:layout_width="20dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        />

    <TextView
        android:id="@+id/showTv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text=""
        android:textSize="60sp"
        android:gravity="center"
        android:background="@color/colorBlue"
        android:visibility="invisible"
        android:textColor="@color/colorAccent"
        android:layout_centerInParent="true"/>
</RelativeLayout>

public class MainActivity extends AppCompatActivity implements ISideBar{

    private TextView showTv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SideBar bar = (SideBar) findViewById(R.id.slidBar);
        bar.setListener(this);

        showTv = (TextView) findViewById(R.id.showTv);
    }

    @Override
    public void onTouchLetterChanged(String s) {
        showTv.setText(s);
        showTv.setVisibility(View.VISIBLE);
    }

    @Override
    public void onTouchUpInVisibility() {
        showTv.setText("");
        showTv.setVisibility(View.INVISIBLE);
    }
}
public class SideBar extends View {

    private ISideBar listener;

    private String[] b = {"A", "B", "C", "D", "E", "F", "G", "H", "I",
            "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
            "W", "X", "Y", "Z", "#"};

    private Paint paint = new Paint();
    private int height;
    private int width;
    private int index = -1;

    public SideBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
    }

    public void setListener(ISideBar listener){
        this.listener = listener;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        /**
         *  在onFinishInflate() 之后才能获取宽高
         */
        height = getHeight();                           //获取高

        width = getWidth();                             //获取宽

        int singleHeight = height / b.length;           //每个字母的高度

        for (int i = 0; i < b.length; i++) {

            if(index == i){
                paint.setColor(Color.rgb(70, 171, 255));
            }else{
                paint.setColor(Color.rgb(00, 00, 00));
            }

              //设置文字的颜色
            paint.setTypeface(Typeface.DEFAULT_BOLD);   //粗体
            paint.setAntiAlias(true);                   //光滑
            paint.setTextSize(50);

            int x = 0;
            int y = singleHeight * (i + 1);

            canvas.drawText(b[i], x, y, paint);
            paint.reset();
        }
    }


    /*
     * dispatchTouchEventonTouchEvent 区别
     * dispatchTouchEvent是用来分发事件的,onTouchEvent是用来处理事件的。
     * 先走dispatchTouchEvent然后走onTouchEvent。
     * View不执行 onInterceptTouchEvent
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getAction();
        float y = event.getY();                     //获取手指在控件上触摸的y坐标
        index =   (int) (y/height*b.length);        // 当前点击的字母

        switch (action) {
            case MotionEvent.ACTION_UP:
                index = -1;
                invalidate();
                if(listener != null){
                    //隐藏弹出字母
                    listener.onTouchUpInVisibility();
                }
                break;
            default:
                if(listener != null){
                    if(index<0 || index >= b.length)return true;
                        listener.onTouchLetterChanged(b[index]);
                }
                invalidate();
                break;
        }
        return true;
    }
}
### Streamlit 中 Sidebar 功能的使用指南 Streamlit 提供了一个简单的 API 接口用于创建侧边栏(Sidebar),这使得开发者可以在应用程序中轻松添加导航菜单和其他控件。通过 `st.sidebar` 方法,可以将任何 Streamlit 小部件放置在侧边栏中。 #### 添加页面标题 可以通过 `st.title()` 或者 `st.header()` 函数设置整个页面的标题,而侧边栏中的标题则需要使用 `st.sidebar.title()` 来定义[^2]。 ```python import streamlit as st # 设置主页面标题 st.title("Main Page Title") # 设置侧边栏标题 st.sidebar.title("Sidebar Title") ``` #### 文本输入框 要在侧边栏中添加文本输入框,可使用 `st.sidebar.text_input()` 函数[^2]。 ```python # 在侧边栏中添加文本输入框 text_input = st.sidebar.text_input("Enter some text here", value="Default Text") st.write(f"You entered: {text_input}") ``` #### 滑动条 滑动条可以通过 `st.sidebar.slider()` 实现,允许用户选择数值范围内的某个值[^2]。 ```python # 在侧边栏中添加滑动条 slider_value = st.sidebar.slider("Select a range of values", min_value=0, max_value=100, value=(25, 75)) st.write(f"Selected Range: {slider_value}") ``` #### 选择项 下拉列表或单选按钮可通过 `st.sidebar.selectbox()` 或 `st.sidebar.radio()` 完成[^2]。 ```python # 下拉选项 dropdown_selection = st.sidebar.selectbox("Choose an option:", ["Option A", "Option B", "Option C"]) st.write(f"Your selection is: {dropdown_selection}") # 单选按钮 radio_selection = st.sidebar.radio("Pick one:", ["Choice 1", "Choice 2", "Choice 3"]) st.write(f"Radio button selected: {radio_selection}") ``` #### 按钮 按钮的功能由 `st.sidebar.button()` 提供,点击后触发特定操作[^2]。 ```python if st.sidebar.button("Click Me"): st.write("Button was clicked!") else: st.write("Waiting for click...") ``` #### 控制显示位置参数 对于某些组件,默认情况下它们会占据父容器的宽度。然而,在侧边栏中这一行为可能有所不同。具体取决于配置属性是否扩展链接宽度以填充其父级容器[^1]。 ```python expand_width = True # 默认为True适用于侧边栏中的页面链接 link = st.sidebar.link_button("Go to another page", url="/another_page", use_container_width=expand_width) ``` #### 文件上传与展示 利用 `st.file_uploader()` 可实现文件上传功能,并结合其他方法动态调整内容布局[^2]。 ```python uploaded_file = st.sidebar.file_uploader("Upload a file:") if uploaded_file is not None: bytes_data = uploaded_file.read() st.write("File content:") st.code(bytes_data.decode(), language="plaintext") ``` #### Tab 分页展示 虽然原生支持有限,但借助第三方库或者自定义 HTML/CSS,也可以模拟标签式的切换效果[^2]。 ```python tabs = {"Tab1": [], "Tab2": []} current_tab = st.sidebar.radio("Navigate Tabs:", list(tabs.keys())) if current_tab == "Tab1": st.write("Content inside first tab.") elif current_tab == "Tab2": st.write("Second tab contents shown here.") ``` 以上展示了如何有效运用 Streamlit 的 sidebars 进行 UI 设计的一些基本技巧[^2]。这些工具可以帮助构建更加直观易用的应用程序界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值