为轮播中的每张照片设置标题和描述。

huangapple go评论105阅读模式
英文:

Set a title and description for each photo in carouse android

问题

  1. <string name="first_image_title">第一张图片标题</string>
  2. <string name="first_image_desc">这是第一张图片的描述</string>
  3. <string name="second_image_title">第二张图片标题</string>
  4. <string name="second_image_desc">这是第二张图片的描述</string>
  5. <string name="third_image_title">第三张图片标题</string>
  6. <string name="third_image_desc">这是第三张图片的描述</string>
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. xmlns:app="http://schemas.android.com/apk/res-auto"
  6. tools:context="fragments.SafetyFragment">
  7. <RelativeLayout
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:id="@+id/tabContent"
  11. android:background="@drawable/rounded_corner2">
  12. <com.synnapps.carouselview.CarouselView
  13. android:id="@+id/carouselView"
  14. android:layout_width="match_parent"
  15. android:layout_height="200dp"
  16. app:fillColor="#FFFFFFFF"
  17. app:pageColor="#00000000"
  18. app:radius="6dp"
  19. app:slideInterval="5000"
  20. app:strokeColor="#FF777777"
  21. app:strokeWidth="1dp"/>
  22. <TextView
  23. android:layout_width="match_parent"
  24. android:layout_height="wrap_content"
  25. android:id="@+id/textTitle"
  26. android:layout_below="@+id/carouselView"/>
  27. <TextView
  28. android:layout_width="match_parent"
  29. android:layout_height="wrap_content"
  30. android:id="@+id/textDesc"
  31. android:layout_below="@+id/textTitle"/>
  32. </RelativeLayout>
  33. </RelativeLayout>
  1. public class SafetyFragment extends Fragment {
  2. private CarouselView carouselView;
  3. private int[] sampleImages = {R.drawable.image1,
  4. R.drawable.image2, R.drawable.image3,
  5. R.drawable.image4, R.drawable.image5,
  6. R.drawable.image6};
  7. public SafetyFragment() {
  8. // Required empty public constructor
  9. }
  10. @Override
  11. public void onCreate(Bundle savedInstanceState) {
  12. super.onCreate(savedInstanceState);
  13. }
  14. @Override
  15. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  16. Bundle savedInstanceState) {
  17. View root = inflater.inflate(R.layout.fragment_safety, container, false);
  18. carouselView = root.findViewById(R.id.carouselView);
  19. ImageListener imagesListenerx = new ImageListener() {
  20. @Override
  21. public void setImageForPosition(int position, ImageView imageView) {
  22. Glide.with(SafetyFragment.this).load(sampleImages[position]).into(imageView);
  23. }
  24. };
  25. ViewListener viewListener = new ViewListener() {
  26. @Override
  27. public View setViewForPosition(int position) {
  28. View customView = getLayoutInflater().inflate(R.layout.custom_image_layout, null);
  29. TextView titleTextView = customView.findViewById(R.id.textTitle);
  30. TextView descTextView = customView.findViewById(R.id.textDesc);
  31. switch (position) {
  32. case 0:
  33. titleTextView.setText(getString(R.string.first_image_title));
  34. descTextView.setText(getString(R.string.first_image_desc));
  35. break;
  36. case 1:
  37. titleTextView.setText(getString(R.string.second_image_title));
  38. descTextView.setText(getString(R.string.second_image_desc));
  39. break;
  40. case 2:
  41. titleTextView.setText(getString(R.string.third_image_title));
  42. descTextView.setText(getString(R.string.third_image_desc));
  43. break;
  44. // Handle other positions similarly
  45. }
  46. return customView;
  47. }
  48. };
  49. carouselView.setPageCount(sampleImages.length);
  50. carouselView.setViewListener(viewListener);
  51. return root;
  52. }
  53. }
英文:

I am using a carouselView library for my app. https://github.com/sayyam/carouselview

The images are displaying and the carousel is working but how do I set a title and description below each image as it slides for each image.

I have a string containing all the title and text for each image.

e.g

  1. &lt;string name=&quot;first_image_title&quot;&gt;First image title&lt;/string&gt;
  2. &lt;string name=&quot;first_image_desc&quot;&gt;This is a description for first image title&lt;/string&gt;
  3. &lt;string name=&quot;second_image_title&quot;&gt;2nd image title&lt;/string&gt;
  4. &lt;string name=&quot;second_image_desc&quot;&gt;This is a description for the second image title&lt;/string&gt;
  5. &lt;string name=&quot;third_image_title&quot;&gt;3rd image title&lt;/string&gt;
  6. &lt;string name=&quot;third_image_desc&quot;&gt;This is a description for the third image title&lt;/string&gt;

All these are supposed to be placed below the sliding images (for each image.)

fragment_safety.xml

Containing the image and where the title and description for each image supposed to be

  1. &lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
  2. xmlns:tools=&quot;http://schemas.android.com/tools&quot;
  3. android:layout_width=&quot;match_parent&quot;
  4. android:layout_height=&quot;match_parent&quot;
  5. xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
  6. tools:context=&quot;fragments.SafetyFragment&quot;&gt;
  7. &lt;RelativeLayout
  8. android:layout_width=&quot;match_parent&quot;
  9. android:layout_height=&quot;wrap_content&quot;
  10. android:id=&quot;@+id/tabContent&quot;
  11. android:background=&quot;@drawable/rounded_corner2&quot;&gt;
  12. &lt;com.synnapps.carouselview.CarouselView
  13. android:id=&quot;@+id/carouselView&quot;
  14. android:layout_width=&quot;match_parent&quot;
  15. android:layout_height=&quot;200dp&quot;
  16. app:fillColor=&quot;#FFFFFFFF&quot;
  17. app:pageColor=&quot;#00000000&quot;
  18. app:radius=&quot;6dp&quot;
  19. app:slideInterval=&quot;5000&quot;
  20. app:strokeColor=&quot;#FF777777&quot;
  21. app:strokeWidth=&quot;1dp&quot;/&gt;
  22. &lt;TextView
  23. android:layout_width=&quot;match_parent&quot;
  24. android:layout_height=&quot;wrap_content&quot;
  25. android:id=&quot;@+id/textTitle&quot;
  26. android:layout_below=&quot;@+id/carouselView&quot;/&gt;
  27. &lt;TextView
  28. android:layout_width=&quot;match_parent&quot;
  29. android:layout_height=&quot;wrap_content&quot;
  30. android:id=&quot;@+id/textDesc&quot;
  31. android:layout_below=&quot;@+id/textTitle&quot;/&gt;
  32. &lt;/RelativLayout&gt;

SafetyFragment.java

According to the doc, I am supposed to implement ViewListener for customView but I cant wrap my head around how to do this....Get all the titles and description in the string and set them for each of the images sliding.

  1. public class SafetyFragment extends Fragment {
  2. private CarouselView carouselView;
  3. private int[] sampleImages = {R.drawable.image1,
  4. R.drawable.image2, R.drawable.image3,
  5. R.drawable.image4, R.drawable.image5,
  6. R.drawable.image6};
  7. public SafetyFragment() {
  8. // Required empty public constructor
  9. }
  10. @Override
  11. public void onCreate(Bundle savedInstanceState) {
  12. super.onCreate(savedInstanceState);
  13. }
  14. @Override
  15. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  16. Bundle savedInstanceState) {
  17. // Inflate the layout for this fragment
  18. View root = inflater.inflate(R.layout.fragment_safety, container, false);
  19. carouselView = root.findViewById(R.id.carouselView);
  20. ImageListener imagesListenerx = new ImageListener() {
  21. @Override
  22. public void setImageForPosition(int position, ImageView imageView) {
  23. Glide.with(SafetyFragment.this).load(sampleImages[position]).into(imageView);
  24. }
  25. };
  26. ViewListener viewListener = new ViewListener() {
  27. @Override
  28. public View setViewForPosition(int position) {
  29. View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
  30. //set view attributes here
  31. return customView;
  32. }
  33. };
  34. carouselView.setPageCount(sampleImages.length);
  35. carouselView.setViewListener(viewListener);
  36. return root;
  37. }
  38. }

答案1

得分: 1

好的,以下是翻译好的内容:

  1. 为每个要在轮播中显示的文本声明一个字符串数组

    1. private String[] titles = {"One", "Two", "Three"};
  2. 设置自定义视图监听器并在布局中获取视图

    1. ViewListener viewListener = new ViewListener() {
    2. int i;
    3. @Override
    4. public View setViewForPosition(int position) {
    5. View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
    6. // 在此处设置视图属性
    7. safety_title = customView.findViewById(R.id.safetyTextTitle);
    8. safety_images = customView.findViewById(R.id.safetyImages);
    9. Glide.with(SafetyFragment.this).load(sampleImages[position]).into(safety_images);
    10. // 非常重要
    11. safety_title.setText(titles[position]);
    12. return customView;
    13. }
    14. };
英文:

I found a way to do this.

1.Declare a string array for each text you want to display in each carousel

  1. private String[] titles = {&quot;One&quot;, &quot;Two&quot;, &quot;Three&quot;}

2. Set a custom view listener and get the view in the layout

  1. ViewListener viewListener = new ViewListener() {
  2. int i;
  3. @Override
  4. public View setViewForPosition(int position) {
  5. View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
  6. //set view attributes here
  7. safety_title = customView.findViewById(R.id.safetyTextTitle);
  8. safety_images = customView.findViewById(R.id.safetyImages);
  9. Glide.with(SafetyFragment.this).load(sampleImages[position]).into(safety_images);
  10. //Very Important
  11. safety_title.setText(titles[position]);
  12. return customView;
  13. }
  14. };

答案2

得分: 0

根据文档,您可以创建一个自定义视图并将视图与数据绑定。

  1. ViewListener viewListener = new ViewListener() {
  2. @Override
  3. public View setViewForPosition(int position) {
  4. View customView = getLayoutInflater().inflate(R.layout.view_custom, null);
  5. // 在这里设置视图属性
  6. return customView;
  7. }
  8. };
英文:

As per the documentation you can create a custom view and bind views with the data

  1. ViewListener viewListener = new ViewListener() {
  2. @Override
  3. public View setViewForPosition(int position) {
  4. View customView = getLayoutInflater().inflate(R.layout.view_custom, null);
  5. //set view attributes here
  6. return customView;
  7. }
  8. };

答案3

得分: 0

以下是您提供的内容的翻译:

我使用了这种方式:

  1. ViewListener viewListener = new ViewListener() {
  2. @Override
  3. public View setViewForPosition(int position) {
  4. View customView = getLayoutInflater().inflate(R.layout.custom_carousel, null);
  5. // 在这里设置视图属性
  6. TextView car_title = (TextView) customView.findViewById(R.id.textTitle);
  7. ImageView car_image = (ImageView) customView.findViewById(R.id.imageView);
  8. car_title.setText(sampleTitle[position]);
  9. car_image.setImageResource(sampleImages[position]);
  10. return customView;
  11. }
  12. };

custom_carousel.xml 中的自定义视图将如下所示:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. xmlns:app="http://schemas.android.com/apk/res-auto">
  7. <ImageView
  8. android:id="@+id/imageView"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:layout_below="@id/textDesc"
  12. android:layout_marginStart="8dp"
  13. android:layout_marginEnd="8dp"
  14. android:layout_marginBottom="8dp"
  15. tools:src="@tools:sample/avatars[1]" />
  16. <TextView
  17. android:id="@+id/textTitle"
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content"
  20. android:layout_marginStart="8dp"
  21. android:layout_marginEnd="8dp"
  22. android:text="测试" />
  23. </RelativeLayout>
英文:

I use this way:

  1. ViewListener viewListener = new ViewListener() {
  2. @Override
  3. public View setViewForPosition(int position) {
  4. View customView = getLayoutInflater().inflate(R.layout.custom_carousel, null);
  5. //set view attributes here
  6. TextView car_title = (TextView) customView.findViewById(R.id.textTitle);
  7. ImageView car_image = (ImageView) customView.findViewById(R.id.imageView);
  8. car_title.setText(sampleTitle[position]);
  9. car_image.setImageResource(sampleImages[position]);
  10. return customView;
  11. }
  12. };

While custom view in custom_carousel.xml will be like this:

  1. &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  2. &lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
  3. xmlns:tools=&quot;http://schemas.android.com/tools&quot;
  4. android:layout_width=&quot;match_parent&quot;
  5. android:layout_height=&quot;match_parent&quot;
  6. xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;&gt;
  7. &lt;ImageView
  8. android:id=&quot;@+id/imageView&quot;
  9. android:layout_width=&quot;match_parent&quot;
  10. android:layout_height=&quot;match_parent&quot;
  11. android:layout_below=&quot;@id/textDesc&quot;
  12. android:layout_marginStart=&quot;8dp&quot;
  13. android:layout_marginEnd=&quot;8dp&quot;
  14. android:layout_marginBottom=&quot;8dp&quot;
  15. tools:src=&quot;@tools:sample/avatars[1]&quot; /&gt;
  16. &lt;TextView
  17. android:id=&quot;@+id/textTitle&quot;
  18. android:layout_width=&quot;match_parent&quot;
  19. android:layout_height=&quot;wrap_content&quot;
  20. android:layout_marginStart=&quot;8dp&quot;
  21. android:layout_marginEnd=&quot;8dp&quot;
  22. android:text=&quot;test&quot; /&gt;
  23. &lt;/RelativeLayout&gt;

huangapple
  • 本文由 发表于 2020年4月8日 07:54:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/61091270.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定