[伪] 级联菜单,两级菜单

[伪] 级联菜单,两级菜单

这段时间需要做一个类似效果的一个菜单样式,所以就查了各种文档,各种百度各种搜索,的确也是搜到了不少的第三方组件,比如(CascadingMenuViewLib)就是其中一个,但是,我脑子笨,研究了3天左右的时间,改不成我需要得样子,So...我用我自己的方式,实现了这个效果(对了,还没有完全实现,因为TextView被点中的样式我还没有设置,不过这都是小事情了..)

在这里,我提供一个思路,代码很简单,当然,我也会附一些上来,好的,我首先说一下思路



首先,我们的xml文件是一个横向的LinearLayout,左边是一个纵向的LinearLayout(里面装着一个个的TextView),右边是一个ListView代码如下

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/tools_scrlllview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <!-- 这个分类   我就直接给他定死了  就好  因为就那几个分类咩-->
                <LinearLayout
                    android:id="@+id/activity_orders_style_choose_ll_mbc"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/selector_choose_ll"
                    android:clickable="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="5dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="主色"
                        android:textSize="16sp" />

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="30dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/title_left_back_press" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/activity_orders_style_choose_ll_installway"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/selector_choose_ll"
                    android:clickable="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="5dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="安装"
                        android:textSize="16sp" />

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="30dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/title_left_back_press" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/activity_orders_style_choose_ll_thickness"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/selector_choose_ll"
                    android:clickable="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="5dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="壁厚"
                        android:textSize="16sp" />

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="30dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/title_left_back_press" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/activity_orders_style_choose_ll_twine"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/selector_choose_ll"
                    android:clickable="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="5dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="网丝"
                        android:textSize="16sp" />

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="30dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/title_left_back_press" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/activity_orders_style_choose_ll_size"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp"
                    android:background="@drawable/selector_choose_ll"
                    android:clickable="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="5dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="尺寸"
                        android:textSize="16sp" />

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="30dp"
                        android:scaleType="fitXY"
                        android:src="@drawable/title_left_back_press" />
                </LinearLayout>
            </LinearLayout>

        </LinearLayout>
        <!--看看看看 我用GridView多好?填充起来一点儿也不费事-->
        <ListView
            android:id="@+id/activity_orders_style_choose_lv_right"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:clickable="false"
            android:orientation="vertical" />
    </LinearLayout>

这个XML写完之后 大致是这个效果

之后 我们需要写一个Adapter,里面的代码如下,没什么好说的,也有注释

/**
 * 是一个适配器 为了每次更新右边的布局 做的一个适配器..||
 * <p/>
 * 构造函数中有参数 来决定到底是填充哪一个布局
 */
public class MyStyleChooseAdapter extends BaseAdapter {
    //    只有一条的视图数据源
    private List mViews;
    //    数据数据源
    private List mDatas;
    //    上下文
    private Activity mActivity;
    //    一个参数 判断是加载哪一个布局  0. msc  1. installway 2. thickness 3. twine 4.size
    private int flag;

    /**
     * 构造函数
     *
     * @param mActivity
     */
    public MyStyleChooseAdapter(Activity mActivity, int flag) {
        this.mActivity = mActivity;
        this.flag = flag;
    }

    @Override
    public int getCount() {
//        只有一条
        return 1;
    }

    @Override
    public Object getItem(int position) {
        return 1;
    }

    @Override
    public long getItemId(int position) {
        return 1;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
//        就一个布局  也不用考虑优化问题吧  直接填充就是了
        LinearLayout ll = null;
//        填充主色布局...好麻烦
        if (flag == 0) {
            ll = (LinearLayout) mActivity.getLayoutInflater().inflate(R.layout.item_style_choose_mbc, null);
            return ll;
        }
//        安装方式的布局 就是一个RadioGroup
        if (flag == 1) {
            ll = (LinearLayout) mActivity.getLayoutInflater().inflate(R.layout.item_style_choose_installway, null);
            return ll;
        }
//        壁厚的布局
        if (flag == 2) {
            ll = (LinearLayout) mActivity.getLayoutInflater().inflate(R.layout.item_style_choose_thickness, null);
            return ll;
        }
//        网丝的布局
        if (flag == 3) {
            ll = (LinearLayout) mActivity.getLayoutInflater().inflate(R.layout.item_style_choose_twine, null);
            return ll;
        }
//        尺寸的布局
        if (flag == 4) {
            ll = (LinearLayout) mActivity.getLayoutInflater().inflate(R.layout.item_style_choose_size, null);
            return ll;
        }
        return ll;
    }
}

之后,我们只需要在主界面上,为这几个TextView添加点击事件,这个效果就算是完成了..总感觉这样做有点傻瓜,所以发上来,让大牛们给我提一下建议,同时也起个记录作用吧!

//            主色点击事件
            case R.id.activity_orders_style_choose_ll_mbc:
                lv_right.setAdapter(new MyStyleChooseAdapter(OrdersStyleChooseActivity.this, 0));
                break;
//            安装方式点击事件
            case R.id.activity_orders_style_choose_ll_installway:
                lv_right.setAdapter(new MyStyleChooseAdapter(OrdersStyleChooseActivity.this, 1));
                break;
//            壁厚点击事件
            case R.id.activity_orders_style_choose_ll_thickness:
                lv_right.setAdapter(new MyStyleChooseAdapter(OrdersStyleChooseActivity.this, 2));
                break;
//            网丝点击事件
            case R.id.activity_orders_style_choose_ll_twine:
                lv_right.setAdapter(new MyStyleChooseAdapter(OrdersStyleChooseActivity.this, 3));
                break;
//            尺寸点击事件
            case R.id.activity_orders_style_choose_ll_size:
                lv_right.setAdapter(new MyStyleChooseAdapter(OrdersStyleChooseActivity.this, 4));
                break;

最后呢 附上我的一个小心得...

RadioButton需要加id并且和RadioGroup结合使用才可以互斥,要是不加id 再设置某一个RadioButton的checked为true时,会出现它永远为点击状态的现象

时间: 2024-10-29 19:11:46

[伪] 级联菜单,两级菜单的相关文章

(转)asp.net(C#)手记之Repeater与两级菜单

先来张图片说明下我们要实现的菜单: 这个菜单只实现了2级哈. 我采用的方法是嵌套2个Repeater. 先看下数据库中的表结构: 数据: 上代码: aspx: <asp:Repeater ID="rptMenus" runat="server" onitemdatabound="rptMenus_ItemDataBound"> <HeaderTemplate> <ul class="mnuLevel01&q

oracle使用connect by进行级联查询 树型菜单

Oracle使用connect by进行级联查询 树型菜单(转) connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点. 来看一个示例,现假设我们拥有一个菜单表t_menu,其中只有三个字段:id.name和parent_id.它们是具有父子关系的,最顶级的菜单对应的parent_id为0.现假设我们拥有如下记录: id name parent_id 1 菜单01 0 2 菜单02 0 3 菜单03 0 4 菜单0101 1 5 菜单0102

【锋利的JQuery-学习笔记】菜单栏及其2级菜单

效果图: 鼠标移动到菜单项后如下: html: <div id="nav" class="mainNav"> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">品 牌</a> <div class="jnNav&

Android的两种菜单

Android子菜单和选项菜单与上下文菜单的实现 菜单在Android开发中必不可少,可是要怎么实现各种菜单呢?是不是很头疼呢?下面我就来介绍一下: 1. 选项菜单和子菜单的实现 选项菜单:最常规的菜单,Android中把它叫做option menu.选项菜单最多只能显示6个菜单项,超过6个时,第6个菜单项会被系统替换为一个叫“更多”的子菜单,原来显示不下的菜单项都作为“更多”菜单的子菜单项. 子菜单:Android中点击了子菜单将弹出悬浮窗口显示子菜单项.子菜单不支持嵌套,即子菜单中不能再包括

DIV+CSS布局重新学习之css控制ul li实现2级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

3级菜单

<html> <head> <title></title> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } ul{ list-style: none; } body{ background: #f5f5f5; font-family: "Microsoft YaHei"; font-size: 12px; } .wrap{ wid

MFC 对话框中动态创建N级菜单以及响应事件

创建一个基于对话框的工程,工程名为CreateMenu 为该对话框增加一个文件菜单项和测试菜单项,如下图所示   测试菜单项至少要有一个子菜单项 在对话框属性中关联该菜单 在resource.h中增加一个ID_TESTMENU宏 #define ID_TESTMENU          5000 在对话框中添加一个Button按钮,建立消息映射,编辑代码如下 void CCreateMenuDlg::OnButton1() { // TODO: Add your control notifica

原生JS实现N级菜单

需求分析 简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单 没有下一级菜单,直接排列 有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图: 图:1 初步实现 1.实现是否存在   > 注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路. HTML结构如下: 图:2 要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移除' 2.下

python练习_module01-1-3级菜单_2

3级菜单的另一种实现方式:循环 函数的方式:http://www.cnblogs.com/jailly/p/6709573.html 1.先创建一个能够表明3级目录结构之间映射关系的字典,然后将其存入一个pickle文件以便调用 1 import pickle 2 3 dir_windows = ['explorer.exe'] 4 part_C = {'windows': dir_windows} 5 6 dir_setup = ['rhel-7.3.iso', 'SecureCRT6.rar