相对布局为进度条[Android]

时间:2016-06-01 10:35:47

标签: android xml android-layout

这是我的问题:

我创建了一个像这样的成就列表

The goal

实际上,我在成就列表视图中有这种元素

The result I have for the moment

以下是列表中元素的xml代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/relative_layout_rewards">



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dip"
        android:orientation="horizontal"
        android:id="@+id/layout_title_rewards">




        <TextView
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:text=""
            android:textSize="13sp"
            android:padding="10dip"
            android:id="@+id/title_rewards"
            android:maxLines="2"
            android:textStyle="bold"/>


        <TextView
            android:id="@+id/number_rewards"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:textSize="12sp"
            android:padding="10dip"
            android:text=""
            android:textStyle="italic"/>



    </LinearLayout>

    <View
        android:id="@+id/rewards_progressbar"
        android:layout_below="@+id/layout_title_rewards"
        android:layout_width="match_parent"
        android:layout_height="3dip"
        android:background="@color/blue"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <RelativeLayout
        android:id="@+id/layout_rewards_progress_bar_view"
        android:layout_width="100dip"
        android:layout_height="60dip"
        android:background="@color/blue">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/layout_rewards_title_rewards_text"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:textSize="13sp"
            android:padding="10dip"
            android:maxLines="2"
            android:textStyle="bold"
            android:text="5 points scored in online game"
            android:textColor="@color/white"
            android:ellipsize="end"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/layout_rewards_points_rewards_text"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/layout_rewards_title_rewards_text"
            android:layout_toEndOf="@+id/layout_rewards_title_rewards_text"
            android:gravity="center_horizontal"
            android:textSize="12sp"
            android:padding="10dip"
            android:text="2 / 5"
            android:textStyle="italic"
            android:textColor="@color/white"/>
    </RelativeLayout>


</RelativeLayout>

对于第一个布局,我只是根据成就的百分比调整java中的宽度。

我想和第一张照片一样的结果。

有什么想法吗?

谢谢。

2 个答案:

答案 0 :(得分:0)

我不知道同时更改文字颜色和进度视图颜色。 但我会发布设计。

  

使用FrameLayout

     

<LinearLayout
    android:id="@+id/layout_title_rewards"
    android:layout_width="match_parent"
    android:layout_height="60dip"
    android:background="#000"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/title_rewards"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:maxLines="2"
        android:padding="10dip"
        android:text=""
        android:textSize="13sp"
        android:textStyle="bold" />


    <TextView
        android:id="@+id/number_rewards"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:gravity="center"
        android:padding="10dip"
        android:text=""
        android:textSize="12sp"
        android:textStyle="italic" />


</LinearLayout>


<FrameLayout
    android:id="@+id/layout_rewards_progress_bar_view"
    android:layout_width="match_parent"
    android:layout_height="60dip"
    android:background="@color/colorPrimary">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/layout_rewards_title_rewards_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:ellipsize="end"
            android:maxLines="2"
            android:padding="10dip"
            android:text="5 points scored in online game"
            android:textColor="#fff"
            android:textSize="13sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/layout_rewards_points_rewards_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true"
            android:layout_toEndOf="@+id/layout_rewards_title_rewards_text"
            android:layout_toRightOf="@+id/layout_rewards_title_rewards_text"
            android:gravity="end"
            android:padding="10dip"
            android:text="2 / 5"
            android:textColor="#fff"
            android:textSize="12sp"
            android:textStyle="italic" />
    </RelativeLayout>
</FrameLayout>

<View
    android:id="@+id/rewards_progressbar"
    android:layout_width="match_parent"
    android:layout_height="3dip"
    android:layout_marginTop="60dip"
    android:background="@color/com_facebook_blue" /> </FrameLayout>

现在为FarmeLayout设置进度(即id layout_rewards_progress_bar_view

答案 1 :(得分:0)

为此你需要使用 FrameLayout

参考我创建的这个示例。您只需将TextVIew替换为您的内容

即可

我的活动代码

public class CustProgress extends Activity {
private FrameLayout mlayFrameLayout;
private RelativeLayout mProgressHolder;
private Handler handler;
private int width = 0, progresswidth = 0;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mlayFrameLayout = (FrameLayout) findViewById(R.id.progress);
    mProgressHolder = (RelativeLayout) findViewById(R.id.progressHolder);
    progresswidth = mProgressHolder.getLayoutParams().width;
    handler = new Handler();
    doProgress();

}

private void doProgress() {
    handler.postDelayed(r, 1000);
}

Runnable r = new Runnable() {

    @Override
    public void run() {
     //if (width <= progresswidth) {
            width=width+10;
            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(width,100);
            mlayFrameLayout.setLayoutParams(layoutParams);

            doProgress();
            //          }
    }
};

  }

这是我的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="match_parent"
android:orientation="vertical" >

<RelativeLayout
    android:id="@+id/progressHolder"
    android:layout_width="match_parent"
    android:layout_height="100dip" >

    <FrameLayout
        android:id="@+id/progress"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_bright" >
    </FrameLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Loading.." />
    </RelativeLayout>
</RelativeLayout>