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)。
这应该会为您提供满足您需求的简单解决方案。
祝你好运。
我正在开发一个 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)。
这应该会为您提供满足您需求的简单解决方案。
祝你好运。