将视图添加到导航抽屉中的列表视图

时间:2015-03-01 10:45:01

标签: android listview navigation-drawer

所以我正在尝试将导航抽屉添加到我的应用程序中,所以作为一个开始我使用android导航抽屉示例创建了一个示例项目。

从我看到的,他们使用列表适配器将项目添加到导航抽屉。

我想再添加一些内容:

  • 标题中的文字视图。

  • 按钮

  • 按类别分隔的一系列项目,如:事件,消息等......

我尝试使用addView方法,但应用程序崩溃了。

然后我使用addHeaderView在标题中添加了文本视图,但这还不够......

将视图添加到列表视图的正确方法是什么?

2 个答案:

答案 0 :(得分:2)

所以这是解决方案

android.support.v4.widget.DrawerLayout是Android历史中令人惊叹的UI元素。假设你在android.support.v4.widget.DrawerLayout中有两个ChildView。然后第一个孩子是左侧抽屉,下一个孩子是右抽屉

这是一个示例,仔细阅读代码并理解结构。

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


    <!--What ever your want in the Right drawer, put it in  below RelativeLayout -->

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >

        <!-- TO SHOW FRAGMENTS -->

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

    </RelativeLayout>





    <!--What ever your want in the LEFT drawer, put it in  below RelativeLayout -->

    <!-- LEFT DRAWER -->

    <RelativeLayout
        android:id="@+id/whatYouWantInLeftDrawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/black" >

        <!-- Cover or Banner -->

        <RelativeLayout
            android:id="@+id/rlBanner"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:orientation="vertical" >

            <!-- Cover Pic Container -->
            <RelativeLayout 
                android:layout_width="match_parent"
                android:layout_height="150dp"
                >
                <!-- Cover Picture -->
                <ImageView
                android:id="@+id/ivCoverPic"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:contentDescription="@string/dummy_desc"
                android:scaleType="centerCrop"
                android:src="@drawable/skrillex" />

                <!-- Tint -->
                <LinearLayout
                    android:orientation="vertical"
                    android:id="@+id/llCoverTint" 
                    android:layout_height="150dp"
                    android:layout_width="match_parent"
                    ></LinearLayout>

            </RelativeLayout>

            <!-- Profile Pic Container -->
            <LinearLayout
                android:id="@+id/llProfilePicContainer"
                android:layout_width="65dp"
                android:layout_height="65dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="7dp"
                android:orientation="vertical" >

                 <com.rh.bookmany.view.MLRoundedImageView
                        android:id="@+id/civProfilePic"
                        android:src="@drawable/tony"
                        android:layout_height="65dp"
                        android:layout_width="65dp"
                        />

            </LinearLayout>

            <TextView
                android:id="@+id/tvUserEmail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/tvUserName"
                android:layout_below="@+id/tvUserName"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tvUserName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/llProfilePicContainer"
                android:layout_marginTop="10dp"
                android:layout_toRightOf="@+id/llProfilePicContainer"
                android:textColor="@color/white"
                android:textSize="15sp" />

        </RelativeLayout>

        <!-- ListMenu -->

        <ListView
            android:id="@+id/navigation_menu_container"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_below="@id/rlBanner"
            android:layout_gravity="start"
            android:background="@color/nyc_black"
            android:choiceMode="singleChoice"
            android:divider="@color/border_black"
            android:dividerHeight="@dimen/divider_height"
            android:listSelector="@drawable/item_selector" >
        </ListView>

    </RelativeLayout>

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

<强> MLRoundedImageView.java

package your.package.name;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

public class MLRoundedImageView extends ImageView {

    public MLRoundedImageView(Context context) {
        super(context);
    }

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

    public MLRoundedImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Log.d("X","MLRoundedImageView ONDRAW");

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }

}

上面的代码可以产生以下输出。

  • 请注意,使用ONLY XML时,您无法进行此类操作。虽然你必须在你的活动中使用JAVA做一些事情。*

enter image description here

答案 1 :(得分:0)

如果您正在使用导航抽屉,最好使用碎片。

这是我几天前创建的导航抽屉的Github link。它的代码很容易理解。如果你发现任何问题,你可以回来。

如果您想了解其工作原理,可以获得documentation here.