ExpandableListView/Детализация в скользящем меню

Вот текущий пользовательский интерфейс для бокового меню.

введите здесь описание изображения

Вот изображение приложения с меню DRILL-DOWN или Expandable ListView.

введите здесь описание изображения

как создать такой же пользовательский интерфейс меню для первого изображения?


person AndroidNewbie    schedule 04.01.2014    source источник


Ответы (3)


Похоже, вы опубликовали еще один похожий вопрос, где я предоставил несколько ссылок на учебные пособия и советы по моей работе с ExpandableListViews: Подменю в приложении

Пожалуйста, дайте мне знать, если есть какая-либо информация, которая вам все еще неясна.

person anddev84    schedule 07.01.2014

Я уже реализую расширяемый список внутри навигационного ящика. Это полный исходный код для него. Проверь это:

это 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

person Hendy    schedule 13.01.2014
comment
TableLayout является излишним для вопроса OP (и для вашего макета, если уж на то пошло). Представление, которое запрашивает OP, может быть выполнено только с помощью TextView (для каждой строки списка) и установки атрибута android:drawableLeft в XML. Я не хочу, чтобы у ОП сложилось впечатление, что TableLayout требуется для правильного отображения ExpandableListView. - person anddev84; 13.01.2014

Это расширяемый список внутри панели навигации. Сначала создайте навигационный ящик, а затем добавьте расширяемый список в этом ящике. Ссылка на панель навигации: http://developer.android.com/design/patterns/navigation-drawer.html ссылка на расширяемый список: http://www.vogella.com/tutorials/AndroidListView/article.html

person Harshal Benake    schedule 08.01.2014