如何在图像滑块android上创建悬停文本?

时间:2015-03-06 19:05:15

标签: android

我有一个底部代码的图像滑块:

public class MainActivity extends Activity {
private class ImagePagerAdapter extends PagerAdapter {
    private final int[] mImages = new int[] {
            R.drawable.chiang_mai,
            R.drawable.himeji,
            R.drawable.petronas_twin_tower,
            R.drawable.ulm
    };

    @Override
    public void destroyItem(final ViewGroup container, final int position, final Object object) {
        ((ViewPager) container).removeView((ImageView) object);
    }

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

    @Override
    public Object instantiateItem(final ViewGroup container, final int position) {
        final Context context = MainActivity.this;
        final ImageView imageView = new ImageView(context);
        final int padding = context.getResources().getDimensionPixelSize(
                R.dimen.padding_medium);
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setImageResource(this.mImages[position]);
        ((ViewPager) container).addView(imageView, 0);
        return imageView;
    }

    @Override
    public boolean isViewFromObject(final View view, final Object object) {
        return view == ((ImageView) object);
    }
}

@Override
public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
    final ImagePagerAdapter adapter = new ImagePagerAdapter();
    viewPager.setAdapter(adapter);

    final CirclePageIndicator circleIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
    circleIndicator.setViewPager(viewPager);

    final TextView tvText = (TextView) findViewById(R.id.text);
    tvText.setText(getResources().getString(R.string.bodyText));

    }
 }

这是XML代码:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
 <com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/indicator"
    android:padding="10dip"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    />
 <TextView 
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</LinearLayout>

所以我需要在Viewpager上设置一个文本悬停,以便当我滑动它时,它会显示特定的图片。如何在此图像滑块上创建悬停文本,同时使其在特定时间自动运行,并在滑动显示悬停文本后。

1 个答案:

答案 0 :(得分:0)

您只有一个XML布局吗?如果你有两个,这使得它更容易使用。

因此,下面的布局是在这种情况下实际图像滑块将放置在Home Fragment上的位置。

<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="com.example.****.****.HomeFragment"
    android:background="#000000"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="204dp"
        android:scaleType="centerCrop"
        ></android.support.v4.view.ViewPager>

其次,下面的XML布局是ViewPager本身的布局。如您所见,它由ImageView和TextView组成。将TextView放在ImageView的顶部。

希望这有点帮助。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image_view"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:scaleType="centerCrop"
        />

    <TextView
        android:id="@+id/myImageViewText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/image_view"
        android:layout_alignTop="@+id/image_view"
        android:layout_alignRight="@+id/image_view"
        android:layout_alignBottom="@+id/image_view"
        android:layout_margin="1dp"
        android:gravity="bottom"
        android:textSize="35dp"
        android:text="******"
        android:textStyle="bold"
        android:textColor="#17baef" />
</RelativeLayout>