Android : 在大图上显示多个小图,在小图内显示文字

Android : Displaying multiple smaller images on top of big image and text inside small image

我正在开发一个 Android 应用程序,其中有一个名为 Section 的容器,其中可以有 Note 对象。用例是用户可以将多个笔记放在一个部分中并组织它们。目前我要用背景图片显示从服务器检索到的部分名称。

现在我的问题是如何在该部分内显示从服务器收到的多个注释。

我知道这可以通过 FrameLayout 实现,但是我的问题是动态音符计数。

请注意,笔记的数量可能因用户而异。

这是各部分当前外观的原始屏幕截图:

现在,当您添加注释时,理想情况下应如下所示:

该部分内的每个块都包含 Note 对象。要显示其内容,我想显示一个便条块类型的图像和几句话 笔记内容。 目前我有从服务器检索笔记的代码,可以显示部分,但我真的不知道如何进行,因为笔记可以是动态的。到目前为止,这是我的代码。

public class GroupSectionActivity extends Activity {

    private SectionServiceImpl sectionService = new SectionServiceImpl();

    private NoteServiceImpl noteService = new NoteServiceImpl();

    private static volatile List<RestSection> restSectionList = new ArrayList<>();

    private static volatile List<RestNote> restNoteList = new ArrayList<>();

    private static volatile Long groupAccountId;

    private static volatile Integer canvasid;

    ListView listView;

    SectionLazyAdapter sectionLazyAdapter;

    static final String msectionname = "msectionname";
    static final String msectionid = "msectionid";


    Button addSectionButton;

    EditText sectionName;

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

        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            groupAccountId = extras.getLong("groupid");
            canvasid = extras.getInt("canvasid");
        }

        restSectionList = this.sectionService.getSectionByCanvas(canvasid);

        ArrayList<HashMap<String, String>> restSectionArrayList = new ArrayList<HashMap<String, String>>();
        for (RestSection restSection : restSectionList) {

            HashMap<String, String> sectionDisplay = new HashMap<>();
            sectionDisplay.put("msectionid", String.valueOf(restSection.getMsectionid()));
            sectionDisplay.put("msectionname", restSection.getMsectionname());
            restSectionArrayList.add(sectionDisplay);
        }

        listView = (ListView) findViewById(R.id.seclist);

        sectionLazyAdapter = new SectionLazyAdapter(this, restSectionArrayList);

        listView.setAdapter(sectionLazyAdapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                int sectionId = restSectionList.get(position).getMsectionid();
                Log.d("Sectionid is ", String.valueOf(sectionId));
                /*Intent intent = new Intent(GroupSectionActivity.this, GroupSectionActivity.class);
                intent.putExtra("groupid", groupAccountId);
                intent.putExtra("sectionid", sectionId);
                startActivity(intent);
                finish();*/

            }
        });

BaseAdapter 来管理这些家伙:

public class SectionLazyAdapter extends BaseAdapter{

    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater=null;


    public SectionLazyAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data=d;
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.activity_group_section, null);

        TextView sectionName = (TextView)vi.findViewById(R.id.sectionname); // title
     //   ImageView sectionImage=(ImageView)vi.findViewById(R.id.sectionimage); // thumb image

        HashMap<String, String> sectionList = new HashMap<String, String>();
        sectionList = data.get(position);

        // Setting all values in listview
        sectionName.setText(sectionList.get(GroupSectionActivity.msectionname));
         return vi;
    }
}

activity_group_section.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dip" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <FrameLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:weightSum="1">
        <ImageView
            android:id="@+id/sectionimage"
            android:layout_width="wrap_content"
            android:layout_height="300dp"
            android:scaleType="fitXY"
            android:src="@drawable/sectionbackground"
           />
    </FrameLayout>
    <TextView
        android:id="@+id/sectionname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textView"
        android:visibility="visible"
        android:gravity="center"
        android:layout_gravity="center_horizontal" />
    </LinearLayout>
</RelativeLayout>

sectionlayout.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="{relativePackage}.${activityClass}" >

    <ListView
        android:id="@+id/seclist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/sectionAddButton">
    </ListView>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/sectionAddButton"
        android:layout_alignParentTop="true"
        android:background="@drawable/sectionbackground"
        android:text="Add Section" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/sectionNameTextField"
        android:layout_alignBottom="@+id/sectionAddButton"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_toEndOf="@+id/sectionAddButton"
        android:hint="Section Name"
        android:gravity="center"
        android:layout_toRightOf="@+id/sectionAddButton" />

</RelativeLayout>

希望问题清楚,如有遗漏,请告诉我。

如果您想以动态方式显示笔记,您应该在每个容器内实现一个 GridView,如果您为 Grid 内的每个笔记设置右边距,组件将自行调整尺寸以适合您的部分。

GridView 适配器非常简单,就像 ListView 适配器一样工作,您只需定义列数,您可以在 XML 中执行此操作,或者以编程方式在 Java代码。

   <GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"/>

首先让我指出 Thomaz 是对的,您应该使用 GridView。
这是满足您的需求和易用性的正确方法,但更重要的是它能够回收其视图。
如果您不使用任何形式的视图回收,您可能会遇到内存不足异常。

但是现在您面临另一个问题:您希望它显示在部分中。
为什么这是个问题?因为:
A) ListView 和 GridView 都对它们的子视图进行回收,现在 ListView 的每个子视图都是一个单独的 GridView,其中包含更多视图,管理起来非常复杂。并非不可能,但相当复杂。
B) 因为 ListView 和 GridView 都是可滚动的(并且因为这个事实是可回收的)所以需要解决滚动内部滚动的问题。

幸运的是我找到了一个答案:SuperSLiM (Formally StickyGridHeaders)。
这应该会为您提供满足您需求的简单解决方案。
祝你好运。