如何在网格视图中显示菜单项

时间：2014-12-11 09:03:22

标签： android

如何在动作栏的网格视图中显示菜单项。默认情况下它显示在listvew类型但是如何在gridview.for文件附件中显示我想在网格视图中显示动作菜单项，如wats app.can如何在动作菜单项上显示自定义视图在android中单击

enter image description here

2 个答案:

答案 0 :(得分：8)

试试这项工作正常。

创建custom_layout.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="wrap_content"
android:background="@android:color/background_light"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/layout1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image1"
            android:text="Menu1" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image2"
            android:text="Menu2" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image3"
            android:text="Menu3" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/layout2"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image4"
            android:text="Menu4" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image5"
            android:text="Menu5" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image6"
            android:text="Menu6" />
    </RelativeLayout>
</LinearLayout>

像这样创建布局或创建自定义网格视图。

创建文件res / menu / main.xml 

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.customactionbar.MainActivity" >

<item
    android:id="@+id/menus"
    android:icon="@drawable/ic_launcher"
    android:orderInCategory="100"
    android:title="@string/menu"
    app:showAsAction="always"/>
</menu>

创建文件res / anim / grow_from_top.xml 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.3" android:toXScale="1.0"
    android:fromYScale="0.3" android:toYScale="1.0"
    android:pivotX="50%" android:pivotY="0%"
    android:duration="@android:integer/config_shortAnimTime"
/>
<alpha
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="0.0" android:toAlpha="1.0"
    android:duration="@android:integer/config_shortAnimTime"
/>
</set>

创建文件res / anim / shrink_from_bottom.xml 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="1.0" android:toXScale="0.3"
    android:fromYScale="1.0" android:toYScale="0.3"
    android:pivotX="50%" android:pivotY="0%"
    android:duration="@android:integer/config_shortAnimTime"
/>
<alpha
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromAlpha="1.0" android:toAlpha="0.0"
    android:duration="@android:integer/config_shortAnimTime"
/>
</set>

粘贴在style.xml下面的行 

 <style name="Animations" />

<style name="Animations.GrowFromTop">
    <item name="@android:windowEnterAnimation">@anim/grow_from_top</item>
    <item name="@android:windowExitAnimation">@anim/shrink_from_bottom</item>
</style>

创建类文件PopupHelper.java 

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.widget.PopupWindow;

public class PopupHelper {

public static PopupWindow newBasicPopupWindow(Context context) {
    final PopupWindow window = new PopupWindow(context);

    // when a touch even happens outside of the window
    // make the window go away
    window.setTouchInterceptor(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
                window.dismiss();
                return true;
            }
            return false;
        }
    });

    window.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
    window.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
    window.setTouchable(true);
    window.setFocusable(true);
    window.setOutsideTouchable(true);

    window.setBackgroundDrawable(new BitmapDrawable());

    return window;
}

/**
 * Displays like a QuickAction from the anchor view.
 * 
 * @param xOffset
 *            offset in the X direction
 * @param yOffset
 *            offset in the Y direction
 */
public static void showLikeQuickAction(PopupWindow window, View root,
        View anchor, WindowManager windowManager, int xOffset, int yOffset) {

    window.setAnimationStyle(R.style.Animations_GrowFromTop);

    int[] location = new int[2];
    anchor.getLocationOnScreen(location);

    Rect anchorRect = new Rect(location[0], location[1], location[0]
            + anchor.getWidth(), location[1] + anchor.getHeight());

    root.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

    int rootWidth = root.getMeasuredWidth();
    int rootHeight = root.getMeasuredHeight();

    int screenWidth = windowManager.getDefaultDisplay().getWidth();
    int screenHeight = windowManager.getDefaultDisplay().getHeight();

    int xPos = ((screenWidth - rootWidth) / 2) + xOffset;
    int yPos = anchorRect.top - rootHeight + yOffset;

    window.showAtLocation(anchor, Gravity.NO_GRAVITY, xPos, yPos);
}

}

最后在youractivity.java文件中添加此代码 

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();
    if (id == R.id.menus) {
        final View menuItemView = findViewById(R.id.menus);
        showPopup(menuItemView);
        return true;
    }
    return super.onOptionsItemSelected(item);
}

private void showPopup(View view) {
    PopupWindow showPopup = PopupHelper
            .newBasicPopupWindow(getApplicationContext());
    LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View popupView = inflater.inflate(R.layout.custom_layout, null);
    showPopup.setContentView(popupView);

    showPopup.setWidth(LayoutParams.WRAP_CONTENT);
    showPopup.setHeight(LayoutParams.WRAP_CONTENT);
    showPopup.setAnimationStyle(R.style.Animations_GrowFromTop);
    showPopup.showAsDropDown(view);
}

答案 1 :(得分：2)

创建自定义网格视图grid_layout.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="8dp" >

<ImageView
    android:id="@+id/menu_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:contentDescription="@string/images"
    android:scaleType="centerCrop" />

<TextView
    android:id="@+id/menu_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/white"
    android:textColor="#196fb5"
    android:textSize="15sp" />
</LinearLayout>

创建custom_layout.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/background_light"
android:orientation="vertical" >

<GridView
    android:id="@+id/grid_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fadingEdge="none"
    android:horizontalSpacing="0dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:verticalSpacing="0dp" />

</LinearLayout>

从上面的代码

更改showPopup（查看视图）方法 
private void showPopup(View view) {

    String[] menuText = { "Menu1", "Menu2", "Menu3", "Menu4", "Menu5","Menu6" };
    int[] images = { R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher };
    GridView menuGrid;
    PopupWindow showPopup = PopupHelper
            .newBasicPopupWindow(getApplicationContext());
    LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View popupView = inflater.inflate(R.layout.custom_layout, null);
    menuGrid = (GridView) popupView.findViewById(R.id.grid_layout);
    CustomGrid adapter = new CustomGrid(getApplicationContext(), menuText,
            images);
    menuGrid.setAdapter(adapter);
    showPopup.setContentView(popupView);

    showPopup.setWidth(LayoutParams.WRAP_CONTENT);
    showPopup.setHeight(LayoutParams.WRAP_CONTENT);
    showPopup.setAnimationStyle(R.style.Animations_GrowFromTop);
    showPopup.showAsDropDown(view);
}

创建适配器类文件CustomGrid.java 

package com.example.customactionbar;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomGrid extends BaseAdapter {
private Context context;
private String[] menuText;
private int[] images;

public CustomGrid(Context context, String[] menuText, int[] images) {
    this.context = context;
    this.menuText = menuText;
    this.images = images;
}

@Override
public int getCount() {
    return images.length;
}

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View grid;
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (convertView == null) {
        grid = new View(context);
        grid = inflater.inflate(R.layout.grid_single, null);
        TextView menu_text = (TextView) grid.findViewById(R.id.menu_text);
        menu_text.setText(menuText[position]);

        ImageView packageImage = (ImageView) grid
                .findViewById(R.id.menu_image);

        packageImage.setImageResource(images[position]);

    } else {
        grid = (View) convertView;
    }
    return grid;
}

}
相关问题
最新问题