ExpandableListView / 滑动菜单中的向下钻取

Question

这是侧边菜单的当前用户界面。

这是带有DRILL-DOWN 或Expandable ListView 菜单的应用图片

如何为第一张图片创建相同的菜单 UI？

Answer 1

您似乎发布了另一个类似的问题，我在其中提供了几个指向我使用 ExpandableListViews 工作的教程和提示的链接：Sub Menu in App

如果您仍有任何不清楚的信息，请告诉我。

Answer 2

我已经在导航抽屉内实现了可扩展的列表视图。这是它的完整源代码。看看这个：

这是 main_activity.java（包括 ExpandableDrawerAdapter）：

public class MainActivity extends Activity {

public DrawerLayout dl;
public ExpandableListView xl;
public ActionBarDrawerToggle adt;
public List<String> alkitab;
public HashMap<String, List<String>> data_alkitab;
public CharSequence title;
private int lastExpandPosition = -1;
private MenuItem menuItem;
private ExpandableDrawerAdapter adapt;

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

    loadData();

    title = getActionBar().getTitle();
    getActionBar().setHomeButtonEnabled(true);
    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setDisplayShowTitleEnabled(true);
    getActionBar().setNavigationMode(ActionBar.DISPLAY_HOME_AS_UP);
    getActionBar().setBackgroundDrawable(new ColorDrawable(Color.BLUE));
    getActionBar().show();

    dl = (DrawerLayout)findViewById(R.id.drawer_layout);
    adt = new ActionBarDrawerToggle(this, dl, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close){
        public void onDrawerClosed(View view) {
            getActionBar().setTitle(title);
            invalidateOptionsMenu();
        }
        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle("Open Drawer");
            invalidateOptionsMenu();
        }
    };
    adt.setDrawerIndicatorEnabled(false);
    dl.setDrawerListener(adt);
    xl = (ExpandableListView)findViewById(R.id.left_drawer);
    adapt = new ExpandableDrawerAdapter(this, alkitab, data_alkitab);
    xl.setAdapter(adapt);
    xl.setTextFilterEnabled(true);
    xl.setOnGroupClickListener(new OnGroupClickListener() {
        @Override
        public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
            return false;
        }
    });

    xl.setOnGroupExpandListener(new OnGroupExpandListener() {
        @Override
        public void onGroupExpand(int groupPosition) {
            if (lastExpandPosition != -1 && groupPosition != lastExpandPosition) {
                xl.collapseGroup(lastExpandPosition);
            }
            lastExpandPosition = groupPosition;
        }
    });

    xl.setOnGroupCollapseListener(new OnGroupCollapseListener() {   
        @Override
        public void onGroupCollapse(int groupPosition) {}
    });

    xl.setOnChildClickListener(new OnChildClickListener() {
        @Override
        public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
            int grup_pos = (int)adapt.getGroupId(groupPosition);
            int child_pos = (int)adapt.getChildId(groupPosition, childPosition);
            if(grup_pos == 1){
                switch (child_pos) {
                case 0:
                    Toast.makeText(getApplicationContext(), "Child 1 Group 1", Toast.LENGTH_SHORT).show();
                    break;
                case 1:
                    Toast.makeText(getApplicationContext(), "Child 2 Group 1", Toast.LENGTH_SHORT).show();
                    break;
                case 2:
                    Toast.makeText(getApplicationContext(), "Child 3 Group 1", Toast.LENGTH_SHORT).show();
                    break;
                case 3:
                    Toast.makeText(getApplicationContext(), "Child 4 Group 1", Toast.LENGTH_SHORT).show();
                    break;
                default:
                    break;
                }
            }
            return false;
        }
    });
}

public void loadData(){

    alkitab = new ArrayList<String>();
    data_alkitab = new HashMap<String, List<String>>();

    alkitab.add("Group 1");
    alkitab.add("Group 2");
    alkitab.add("Group 3");
    alkitab.add("Group 4");

    List<String> kitab_perjanjian_lama = new ArrayList<String>();
    kitab_perjanjian_lama.add("Child 1 Of Group 1");
    kitab_perjanjian_lama.add("Child 2 Of Group 1");
    kitab_perjanjian_lama.add("Child 3 Of Group 1");
    kitab_perjanjian_lama.add("Child 4 Of Group 1");

    List<String> kitab_perjanjian_baru = new ArrayList<String>();
    kitab_perjanjian_baru.add("Child 1 Of Group 2");
    kitab_perjanjian_baru.add("Child 2 Of Group 2");
    kitab_perjanjian_baru.add("Child 3 Of Group 2");
    kitab_perjanjian_baru.add("Child 4 Of Group 2");

    List<String> kidung_jemaat = new ArrayList<String>();
    kidung_jemaat.add("Child 1 Of Group 3");
    kidung_jemaat.add("Child 2 Of Group 3");
    kidung_jemaat.add("Child 3 Of Group 3");
    kidung_jemaat.add("Child 4 Of Group 3");

    List<String> gita_bakti = new ArrayList<String>();
    gita_bakti.add("Child 1 Of Group 4");
    gita_bakti.add("Child 2 Of Group 4");
    gita_bakti.add("Child 3 Of Group 4");
    gita_bakti.add("Child 4 Of Group 4");

    data_alkitab.put(alkitab.get(0), kitab_perjanjian_lama);
    data_alkitab.put(alkitab.get(1), kitab_perjanjian_baru);
    data_alkitab.put(alkitab.get(2), kidung_jemaat);
    data_alkitab.put(alkitab.get(3), gita_bakti);
}

@SuppressWarnings("unused")
private void displayViewExpandableListview(int position){
    android.app.Fragment frag = null;
    switch (position) {
    case 0:
        Toast.makeText(this, "test 1", Toast.LENGTH_SHORT).show();
        break;
    case 1:
        Toast.makeText(this, "test 2", Toast.LENGTH_SHORT).show();
        break;
    case 2:
        Toast.makeText(this, "Test 3", Toast.LENGTH_SHORT).show();
        break;
    default:
        break;
    }

    if(frag != null){
        android.app.FragmentManager frag_mgr = getFragmentManager();
        frag_mgr.beginTransaction().replace(R.id.content_frame, frag).commit();
        xl.setItemChecked(position, true);
        dl.closeDrawer(xl);
    } else {
        Log.d("Error 1", "Error creating fragment");
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case android.R.id.home:
        finish();
        break;
    default:
        break;
    }
    return true;
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    adt.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    adt.onConfigurationChanged(newConfig);
}

public class ExpandableDrawerAdapter extends BaseExpandableListAdapter{

    public final Context _context;
    public List<String> _alkitab, tempchild;
    public HashMap<String, List<String>> _data_alkitab;

    public ExpandableDrawerAdapter(Context context, List<String> alkitab, HashMap<String, List<String>> data_alkitab){
        this._context = context;
        this._alkitab = alkitab;
        this._data_alkitab = data_alkitab;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return this._data_alkitab.get(this._alkitab.get(groupPosition)).get(childPosition);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        final String childText = (String)getChild(groupPosition, childPosition);
        if(convertView == null){
            LayoutInflater inflater = (LayoutInflater)this._context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.list_row_data_alkitab, null);
        }
        TextView a = (TextView)convertView.findViewById(R.id.lblListItem);
        a.setText(childText);
        return convertView;
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return this._data_alkitab.get(this._alkitab.get(groupPosition)).size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return this._alkitab.get(groupPosition);
    }

    @Override
    public int getGroupCount() {
        return this._alkitab.size();
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        String headerTitle = (String)getGroup(groupPosition);
        if(convertView == null){            
            LayoutInflater inflater = (LayoutInflater)this._context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.list_row_group, null);
        }
        if(groupPosition==0){
            ((ImageView)convertView.findViewById(R.id.image2)).setImageResource(R.drawable.ic_launcher);
            ((TextView)convertView.findViewById(R.id.text2)).setText("Description below group 1");
        }else if(groupPosition==1){
            ((ImageView)convertView.findViewById(R.id.image2)).setImageResource(R.drawable.ic_launcher);
            ((TextView)convertView.findViewById(R.id.text2)).setText("Description below group 2");
        }else if(groupPosition==2){
            ((ImageView)convertView.findViewById(R.id.image2)).setImageResource(R.drawable.ic_launcher);
            ((TextView)convertView.findViewById(R.id.text2)).setText("Description below group 3");
        }else if(groupPosition==3){
            ((ImageView)convertView.findViewById(R.id.image2)).setImageResource(R.drawable.ic_launcher);
            ((TextView)convertView.findViewById(R.id.text2)).setText("Description below group 4");
        }
        TextView b = (TextView)convertView.findViewById(R.id.text1);
        b.setTypeface(null, Typeface.BOLD);
        b.setText(headerTitle);

        return convertView;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}
}

这是activity_main.xml：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
</FrameLayout>

<ExpandableListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="700dp"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/black"
    android:dividerHeight="1dp" 
    android:indicatorRight="440dp"
    android:background="#fff"/>

</android.support.v4.widget.DrawerLayout>

这是 list_row_data_alkitab.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:padding="8dp"
android:focusable="false" >

<TextView
    android:id="@+id/lblListItem"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="17dip"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:textColor="#000000"
    android:focusable="false"
    android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />
</LinearLayout>

这是 list_row_group.xml：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#ffffff"
android:paddingTop="0dip"
android:stretchColumns="1" >

<TableRow>

    <ImageView
        android:id="@+id/image2"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_marginLeft="10dip" />

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:paddingTop="0dip"
        android:stretchColumns="1" >

        <TableRow>

            <TextView
                android:id="@+id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                android:layout_marginLeft="10dip"
                android:layout_weight="1"
                android:textColor="#000000"
                android:textSize="17dip"
                android:textStyle="bold" />
        </TableRow>

        <TableRow>

            <TextView
                android:id="@+id/text2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                android:layout_marginLeft="10dip"
                android:layout_weight="1"
                android:textColor="#000000"
                android:textSize="14dip" />
        </TableRow>
    </TableLayout>
</TableRow>
</TableLayout>

这是结果图片：

快乐的编码开发人员：D

Answer 3

它是导航抽屉内的可扩展列表视图。首先创建导航抽屉，然后在该抽屉中添加可扩展的列表视图。导航抽屉链接：http://developer.android.com/design/patterns/navigation-drawer.html 可扩展列表视图链接：http://www.vogella.com/tutorials/AndroidListView/article.html